<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.1">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yoursite.com","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"flat"},"back2top":{"enable":true,"sidebar":true,"scrollpercent":true},"bookmark":{"enable":true,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="Javscript基础语法概念 JavaSciprt是一种脚本语言，也是一种弱类型的语言 JavaScript是一种运行在浏览器中的解释型的编程语言 在Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互（行为） 实现表单的验证、设置网页的动态效果  编程语言 标记语言 脚本语言分别有哪些？ 区别是什么？  Javascript是脚本语言还是编程语言？ &#x3D;&#x3D;脚本语言&#x3D;&#x3D;：脚">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript基础">
<meta property="og:url" content="http://yoursite.com/2020/04/06/%E5%89%8D%E7%AB%AF/JavaScript/JavaScrip%E5%9F%BA%E7%A1%80/index.html">
<meta property="og:site_name" content="heweiliang blog">
<meta property="og:description" content="Javscript基础语法概念 JavaSciprt是一种脚本语言，也是一种弱类型的语言 JavaScript是一种运行在浏览器中的解释型的编程语言 在Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互（行为） 实现表单的验证、设置网页的动态效果  编程语言 标记语言 脚本语言分别有哪些？ 区别是什么？  Javascript是脚本语言还是编程语言？ &#x3D;&#x3D;脚本语言&#x3D;&#x3D;：脚">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-04-05T16:17:45.599Z">
<meta property="article:modified_time" content="2020-06-27T02:22:32.729Z">
<meta property="article:author" content="heweiliang">
<meta property="article:tag" content="前端">
<meta property="article:tag" content="JavaScript">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="http://yoursite.com/2020/04/06/%E5%89%8D%E7%AB%AF/JavaScript/JavaScrip%E5%9F%BA%E7%A1%80/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>JavaScript基础 | heweiliang blog</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="heweiliang blog" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">heweiliang blog</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-fw fa-user"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档</a>

  </li>
        <li class="menu-item menu-item-schedule">

    <a href="/schedule/" rel="section"><i class="fa fa-fw fa-calendar"></i>日程表</a>

  </li>
        <li class="menu-item menu-item-sitemap">

    <a href="/sitemap.xml" rel="section"><i class="fa fa-fw fa-sitemap"></i>站点地图</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

  <a href="https://github.com/yourname" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/04/06/%E5%89%8D%E7%AB%AF/JavaScript/JavaScrip%E5%9F%BA%E7%A1%80/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="heweiliang">
      <meta itemprop="description" content="heweiliang blog">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="heweiliang blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          JavaScript基础<a href="https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name_posts/%E5%89%8D%E7%AB%AF/JavaScript/JavaScrip%E5%9F%BA%E7%A1%80.md" class="post-edit-link" title="编辑" rel="noopener" target="_blank"><i class="fa fa-pencil"></i></a>
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-04-06 00:17:45" itemprop="dateCreated datePublished" datetime="2020-04-06T00:17:45+08:00">2020-04-06</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-06-27 10:22:32" itemprop="dateModified" datetime="2020-06-27T10:22:32+08:00">2020-06-27</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span><br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>33k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>30 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="Javscript基础语法"><a href="#Javscript基础语法" class="headerlink" title="Javscript基础语法"></a>Javscript基础语法</h1><h2 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h2><ol>
<li>JavaSciprt是一种脚本语言，也是一种<strong>弱类型的语言</strong></li>
<li>JavaScript是一种运行在浏览器中的<code>解释型</code>的<strong>编程语言</strong></li>
<li>在Web世界里，只有JavaScript能跨平台、跨浏览器驱动网页，与用户交互（行为）</li>
<li>实现表单的验证、设置网页的动态效果</li>
</ol>
<p><a href="https://www.zhihu.com/question/22443881" target="_blank" rel="noopener">编程语言 标记语言 脚本语言分别有哪些？ 区别是什么？</a></p>
<blockquote>
<p><strong>Javascript是脚本语言还是编程语言？</strong></p>
<p>==脚本语言==：脚本语言又被称为扩建的语言，或者动态语言，是一种编程语言，用来控制软件应用程序，脚本通常以文本（如<a href="https://baike.baidu.com/item/ASCII" target="_blank" rel="noopener">ASCII</a>)保存，只在被调用时进行解释或编译。（解释器）</p>
<p>==编程语言==：编程语言（programming language）可以简单的理解为一种计算机和人都能识别的语言。一种计算机语言让程序员能够准确地定义计算机所需要使用的数据，并精确地定义在不同情况下所应当采取的行动。（编译器）</p>
<p>脚本语言只是编程语言这个概念的子集。它是编程语言的一种类型。</p>
<p>硬要说和脚本语言相对的概念，那应该是编译型语言。</p>
<p>简单地来说，编译型语言在经过编译之后就是机器可以直接运行的代码了。</p>
<p>但是脚本语言，或者说解释型语言很多时候不需要提前编译，而是在运行时被解释器即时翻译成机器可以理解的机器指令。</p>
<p>但是这样的概念并不是绝对的。</p>
<p>实际上像Java和C#这样的语言，编译器只会把源代码编译成一种中间语言，在运行时再被各自的虚拟机和运行时即时翻译成机器指令。</p>
<p>==标记语言==：</p>
</blockquote>
<h3 id="历史"><a href="#历史" class="headerlink" title="历史"></a>历史</h3><ul>
<li>1995年，网景公司的Brendan Eich用10天设计出Javascript语言，与Java没有关系，只是为了提高知名度，才取名Javascript。</li>
</ul>
<h3 id="组成部分-ECMAScript-DOM-BOM"><a href="#组成部分-ECMAScript-DOM-BOM" class="headerlink" title="组成部分 ECMAScript + DOM + BOM"></a>组成部分 <code>ECMAScript + DOM + BOM</code></h3><table>
<thead>
<tr>
<th align="center">名称</th>
<th align="center">内容</th>
</tr>
</thead>
<tbody><tr>
<td align="center">ECMAScript（核心）</td>
<td align="center">描述语言的语法和基本对象</td>
</tr>
<tr>
<td align="center">DOM(文档对象模型)</td>
<td align="center">操作HTML document</td>
</tr>
<tr>
<td align="center">BOM（浏览器对象模型）</td>
<td align="center">操作浏览器window</td>
</tr>
</tbody></table>
<h3 id="ECMScript-标准-（ES6-2015）-JavaScript（商标）"><a href="#ECMScript-标准-（ES6-2015）-JavaScript（商标）" class="headerlink" title="ECMScript (标准)（ES6 2015）== JavaScript（商标）"></a>ECMScript (标准)（ES6 2015）== JavaScript（商标）</h3><ol>
<li>Javascript是一个网景公司注册的商标，而<strong>ECMAScript是一个语言标准</strong></li>
<li>ECMA组织 定制了JavaScript的语言标准 == ECMAScript标准</li>
<li>ECMAScript是一种语言标准，而JavaScript是网景公司对ECMAScript标准的一种实现，ECMAscript可以默认是Javascript</li>
</ol>
<h3 id="版本（ES6-2015）"><a href="#版本（ES6-2015）" class="headerlink" title="版本（ES6 2015）"></a>版本（ES6 2015）</h3><ol>
<li>2015.6 ,最新版ECMAScript 6标准（简称ES6）发布，所以，讲到JavaScript的版本，实际上就是说它实现了ECMAScript标准的哪个版本。</li>
<li>ES5、ES6、…..、ES10 、…..</li>
</ol>
<blockquote>
<p>ECMAScript 6 也称为 ECMAScript 2015。</p>
<p>ECMAScript 7 也称为 ECMAScript 2016。</p>
</blockquote>
<h2 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h2><h3 id="语法规制"><a href="#语法规制" class="headerlink" title="语法规制"></a>语法规制</h3><ol>
<li>每个语句以分号结尾 <code>;</code>（可以不用分号结尾，不强制要求）</li>
<li>语句块以<code>{ }</code> 包围</li>
<li>字符串使用 <code>&#39;单引号&#39;或者 &quot;双引号&quot;</code>，多重嵌套可以”双引号加’’ 单引号”进行区分</li>
</ol>
<h3 id="命名规则"><a href="#命名规则" class="headerlink" title="命名规则"></a>命名规则</h3><p><a href="https://juejin.im/entry/599d433cf265da24797b5c66" target="_blank" rel="noopener">命名与注释规范详解 - 前端 </a></p>
<h3 id="script标签的位置与使用"><a href="#script标签的位置与使用" class="headerlink" title="script标签的位置与使用"></a>script标签的位置与使用</h3><p>可以在head里面，也可以放在body里面</p>
<ol>
<li>内联</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//可以在head内，也可以body内</span></span><br><span class="line">&lt;script&gt;&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>外联</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=<span class="string">"js文件"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="输入-提示框-输出"><a href="#输入-提示框-输出" class="headerlink" title="输入(提示框)输出"></a>输入(提示框)输出</h3><h4 id="输入-提示框"><a href="#输入-提示框" class="headerlink" title="输入: 提示框"></a>输入: <code>提示框</code></h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> input = prompt(<span class="string">"请输入一个数字"</span>)</span><br><span class="line"><span class="built_in">window</span>.prompt(<span class="string">"sometext"</span>,<span class="string">"defaultvalue"</span>) <span class="comment">//提示框  提示信息 默认值</span></span><br></pre></td></tr></table></figure>

<h4 id="输出：四种方法-document-write-console-log-alert-innerHTML-quot-quot"><a href="#输出：四种方法-document-write-console-log-alert-innerHTML-quot-quot" class="headerlink" title="输出：四种方法 document.write() console.log() alert() innerHTML = &quot; &quot;"></a>输出：<code>四种方法 document.write() console.log() alert() innerHTML = &quot; &quot;</code></h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">方法一</span><br><span class="line"><span class="comment">//将内容写入到HTML文档</span></span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">'hello world!!!'</span>);</span><br><span class="line"><span class="comment">//JavaScript：直接写入 HTML 输出流 &amp;&amp; 不支持style</span></span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">'&lt;h1&gt;hello world!!!&lt;/h1&gt;'</span>);</span><br><span class="line"><span class="comment">// 多次执行doucument,write() 时追加内容</span></span><br><span class="line"><span class="comment">//doucument,write() 内容为空时清空页面元素，但不清空document。write()写入的内容</span></span><br><span class="line"><span class="comment">//如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。</span></span><br><span class="line"><span class="comment">//弹出警告框</span></span><br><span class="line">方法二</span><br><span class="line"><span class="built_in">window</span>.alert()</span><br><span class="line">alert(<span class="string">'hello world!!!'</span>);</span><br><span class="line"><span class="comment">//控制台输出</span></span><br><span class="line">方法三</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'hello world!!!'</span>);</span><br><span class="line">方法四</span><br><span class="line"><span class="comment">//写入到HTML元素</span></span><br><span class="line">element.innerHTML = <span class="string">""</span></span><br><span class="line"><span class="comment">//插入标签和添加内容</span></span><br><span class="line">doucument.getElementById(<span class="string">"demo"</span>).innerHTML = <span class="string">"&lt;h1&gt;段落修改&lt;h1&gt;"</span>;  </span><br><span class="line"><span class="comment">//修改内容</span></span><br><span class="line">doucument.getElementById(<span class="string">"demo"</span>).innerText = <span class="string">"段落修改"</span>;</span><br></pre></td></tr></table></figure>

<h3 id="变量var-ES6变量-let-与常量-const"><a href="#变量var-ES6变量-let-与常量-const" class="headerlink" title="变量var ES6变量(let)与常量(const)"></a>变量<code>var ES6变量(let)与常量(const)</code></h3><p><a href="https://www.cnblogs.com/zhuoshen/p/9577220.html" target="_blank" rel="noopener">JS — var、let、const三者的区别</a></p>
<ol>
<li>let声明的变量只在let命令所在的代码块内有效（块级作用域）</li>
<li>const声明一个只读的常量，一旦声明，常量的值就不能改变</li>
<li>全局变量（全局作用域）与函数内的局部变量（函数作用域）</li>
</ol>
<ul>
<li><font color='red' size='4' style='background:#eee'>变量是可以变化的数值，常量固定不变的数值</font></li>
<li>变量在JavaScript中就是用一个变量名表示，</li>
<li>变量名是大小写英文、数字、<code>$</code>和<code>_</code>的组合，且不能用数字开头。变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）</li>
<li>变量名也不能是JavaScript的关键字，申明一个变量用<code>var</code>语句</li>
<li>大小写敏感</li>
<li>一条语句，可以使用多个变量</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = 值;</span><br><span class="line"><span class="keyword">let</span> num = 变量;</span><br><span class="line"><span class="keyword">const</span> num = 常量;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> x,y,z = <span class="number">1</span>; <span class="comment">//x,y = undefinded z = 1</span></span><br><span class="line"><span class="keyword">var</span> x = <span class="number">10</span>,y,z = <span class="number">20</span> </span><br><span class="line"></span><br><span class="line"><span class="comment">//经常会声明无值的变量。未使用值来声明的变量，其值实际上是undefined</span></span><br><span class="line"><span class="keyword">var</span> x;  <span class="comment">// x = underfined</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//重新声明Javascript的值，变量的值不会丢失</span></span><br><span class="line"><span class="keyword">var</span> x = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">var</span> x;</span><br><span class="line"><span class="built_in">console</span>.log(x);</span><br></pre></td></tr></table></figure>

<h4 id="var-amp-amp-let-amp-amp-const"><a href="#var-amp-amp-let-amp-amp-const" class="headerlink" title="var &amp;&amp; let&amp;&amp; const"></a>var &amp;&amp; let&amp;&amp; const</h4><h5 id="var"><a href="#var" class="headerlink" title="var"></a>var</h5><h5 id="let"><a href="#let" class="headerlink" title="let"></a>let</h5><h5 id="const并非真正的变量-数组或者对象的属性可以改变"><a href="#const并非真正的变量-数组或者对象的属性可以改变" class="headerlink" title="const并非真正的变量 数组或者对象的属性可以改变"></a>const<code>并非真正的变量 数组或者对象的属性可以改变</code></h5><p>用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再改变</p>
<p><code>const</code>定义常量与使用<code>let</code> 定义的变量相似：</p>
<ul>
<li>二者都是块级作用域</li>
<li>都不能和它所在作用域内的其他变量或函数拥有相同的名称</li>
</ul>
<p>两者还有以下两点区别：</p>
<ul>
<li><code>const</code>声明的常量必须初始化，而<code>let</code>声明的变量不用</li>
<li>==const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改==。</li>
</ul>
<p>const并非真正的常量</p>
<p>const 的本质：const 定义的变量并非常量，并非不可改变，它定义了一个常量引用一个值。</p>
<p>使用const定义的对象或者数组，其实是可变。代码不会报错</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建常量对象</span></span><br><span class="line"><span class="keyword">const</span> car = &#123;<span class="attr">type</span>:<span class="string">"Fiat"</span>, <span class="attr">model</span>:<span class="string">"500"</span>, <span class="attr">color</span>:<span class="string">"white"</span>&#125;;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 修改属性:</span></span><br><span class="line">car.color = <span class="string">"red"</span>;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 添加属性</span></span><br><span class="line">car.owner = <span class="string">"Johnson"</span>;</span><br></pre></td></tr></table></figure>

<p>不能对常量对象重新赋值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> cars = [<span class="string">"Saab"</span>, <span class="string">"Volvo"</span>, <span class="string">"BMW"</span>];</span><br><span class="line">cars = [<span class="string">"Toyota"</span>, <span class="string">"Volvo"</span>, <span class="string">"Audi"</span>];    <span class="comment">// 错误</span></span><br></pre></td></tr></table></figure>

<p>Internet Explorer 10 及更早版本的浏览器不支持 const 关键字。</p>
<h4 id="全局变量和局部变量"><a href="#全局变量和局部变量" class="headerlink" title="全局变量和局部变量"></a>全局变量和局部变量</h4><ul>
<li>var 在函数外声明的变量作用域是全局的</li>
<li>全局变量在 JavaScript 程序的任何地方都可以访问。</li>
<li>函数内使用 var 声明的变量只能在函数内容访问，如果不使用 var 则是全局变量。</li>
<li>在函数体内使用 <strong>var</strong> 和 <strong>let</strong> 关键字声明的变量有点类似。它们的作用域都是 <strong>局部的</strong></li>
<li>在函数体外或代码块外使用 <strong>var</strong> 和 <strong>let</strong> 关键字声明的变量也有点类似。它们的作用域都是 <strong>全局的</strong>:</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用 var</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myFunction</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> carName = <span class="string">"Volvo"</span>;   <span class="comment">// 局部作用域</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用 let</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myFunction</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> carName = <span class="string">"Volvo"</span>;   <span class="comment">//  局部作用域</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 使用 var</span></span><br><span class="line"><span class="keyword">var</span> x = <span class="number">2</span>;       <span class="comment">// 全局作用域</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用 let</span></span><br><span class="line"><span class="keyword">let</span> x = <span class="number">2</span>;       <span class="comment">// 全局作用域</span></span><br></pre></td></tr></table></figure>

<h4 id="作用域"><a href="#作用域" class="headerlink" title="作用域"></a>作用域</h4><p><a href="https://www.cnblogs.com/leftJS/p/11067908.html" target="_blank" rel="noopener">JS中的作用域和作用域链 </a></p>
<h5 id="全局作用域"><a href="#全局作用域" class="headerlink" title="全局作用域"></a>全局作用域</h5><h5 id="函数作用域"><a href="#函数作用域" class="headerlink" title="函数作用域"></a>函数作用域</h5><h5 id="块级作用域（Block-Scope）"><a href="#块级作用域（Block-Scope）" class="headerlink" title="块级作用域（Block Scope）"></a>块级作用域（Block Scope）</h5><p>ES6可以使用let关键字来实现块级作用域</p>
<p>let声明的变量只能在let命令所在的代码块{} 内有效，在{}之外不能访问</p>
<h5 id="循环作用域"><a href="#循环作用域" class="headerlink" title="循环作用域"></a>循环作用域</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">var i &#x3D; 5;</span><br><span class="line">for (var i &#x3D; 0; i &lt; 10; i++) &#123;</span><br><span class="line">    &#x2F;&#x2F; 一些代码...</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 这里输出 i 为 10</span><br><span class="line"></span><br><span class="line">let i &#x3D; 5;</span><br><span class="line">for (let i &#x3D; 0; i &lt; 10; i++) &#123;</span><br><span class="line">    &#x2F;&#x2F; 一些代码...</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F; 这里输出 i 为 5</span><br></pre></td></tr></table></figure>

<h5 id="词义作用域"><a href="#词义作用域" class="headerlink" title="词义作用域"></a>词义作用域</h5><h4 id="HTML-代码中使用全局变量"><a href="#HTML-代码中使用全局变量" class="headerlink" title="HTML 代码中使用全局变量"></a>HTML 代码中使用全局变量</h4><p>在 JavaScript 中, 全局作用域是针对 JavaScript 环境。</p>
<p>在 HTML 中, 全局作用域是针对 window 对象。</p>
<p>使用 <strong>var</strong> 关键字声明的全局作用域变量属于 window 对象:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">var carName &#x3D; &quot;Volvo&quot;;</span><br><span class="line">&#x2F;&#x2F; 可以使用 window.carName 访问变量</span><br><span class="line"></span><br><span class="line">使用 let 关键字声明的全局作用域变量不属于 window 对象:</span><br><span class="line">let carName &#x3D; &quot;Volvo&quot;;</span><br><span class="line">&#x2F;&#x2F; 不能使用 window.carName 访问变量</span><br></pre></td></tr></table></figure>

<h4 id="变量提升"><a href="#变量提升" class="headerlink" title="变量提升"></a>变量提升</h4><ul>
<li><p>var关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明</p>
</li>
<li><p>const关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用</p>
</li>
<li><p>let关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用。</p>
</li>
</ul>
<h3 id="语句标识符-关键字"><a href="#语句标识符-关键字" class="headerlink" title="语句标识符)(关键字)"></a>语句标识符)(关键字)</h3><p>JavaScript 语句通常以一个 <strong>语句标识符</strong> 为开始，并执行该语句。</p>
<p>语句标识符是保留关键字不能作为变量名使用。</p>
<table>
<thead>
<tr>
<th align="center">语句</th>
<th align="center">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="center">break</td>
<td align="center">用于跳出循环。</td>
</tr>
<tr>
<td align="center">catch</td>
<td align="center">语句块，在 try 语句块执行出错时执行 catch 语句块。</td>
</tr>
<tr>
<td align="center">continue</td>
<td align="center">跳过循环中的一个迭代。</td>
</tr>
<tr>
<td align="center">do … while</td>
<td align="center">执行一个语句块，在条件语句为 true 时继续执行该语句块。</td>
</tr>
<tr>
<td align="center">for</td>
<td align="center">在条件语句为 true 时，可以将代码块执行指定的次数。</td>
</tr>
<tr>
<td align="center">for … in</td>
<td align="center">用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。</td>
</tr>
<tr>
<td align="center">function</td>
<td align="center">定义一个函数</td>
</tr>
<tr>
<td align="center">if … else</td>
<td align="center">用于基于不同的条件来执行不同的动作。</td>
</tr>
<tr>
<td align="center">return</td>
<td align="center">退出函数</td>
</tr>
<tr>
<td align="center">switch</td>
<td align="center">用于基于不同的条件来执行不同的动作。</td>
</tr>
<tr>
<td align="center">throw</td>
<td align="center">抛出（生成）错误 。</td>
</tr>
<tr>
<td align="center">try</td>
<td align="center">实现错误处理，与 catch 一同使用。</td>
</tr>
<tr>
<td align="center">var</td>
<td align="center">声明一个变量。</td>
</tr>
<tr>
<td align="center">while</td>
<td align="center">当条件语句为 true 时，执行语句块。</td>
</tr>
</tbody></table>
<h3 id="注释"><a href="#注释" class="headerlink" title="注释"></a>注释</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 单行注释</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">多行</span></span><br><span class="line"><span class="comment">注释</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<h3 id="运算符"><a href="#运算符" class="headerlink" title="运算符"></a>运算符</h3><h3 id="语句-三种语句-顺序-条件-循环"><a href="#语句-三种语句-顺序-条件-循环" class="headerlink" title="语句 三种语句 顺序/条件/循环"></a>语句 <code>三种语句 顺序/条件/循环</code></h3><h4 id="顺序语法"><a href="#顺序语法" class="headerlink" title="顺序语法"></a>顺序语法</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">100</span>;</span><br><span class="line"><span class="built_in">console</span>.log(num)</span><br></pre></td></tr></table></figure>

<h4 id="条件语句"><a href="#条件语句" class="headerlink" title="条件语句"></a>条件语句</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 第一种</span></span><br><span class="line"><span class="keyword">if</span>()&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//第二种</span></span><br><span class="line"><span class="keyword">if</span>()&#123;</span><br><span class="line"></span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//第三种</span></span><br><span class="line"><span class="keyword">if</span>()&#123;</span><br><span class="line">   </span><br><span class="line">&#125;<span class="keyword">else</span> <span class="keyword">if</span>()&#123;</span><br><span class="line">         </span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//第四种</span></span><br><span class="line"><span class="keyword">switch</span>()&#123;</span><br><span class="line">       <span class="keyword">case</span>:  ;</span><br><span class="line">       <span class="keyword">case</span>:  ;</span><br><span class="line">       <span class="keyword">case</span>:  ; </span><br><span class="line">       <span class="keyword">default</span>: ;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="循环语句"><a href="#循环语句" class="headerlink" title="循环语句"></a>循环语句</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>()&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">while</span>()&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">do</span>() </span><br><span class="line"><span class="keyword">while</span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="代码块"><a href="#代码块" class="headerlink" title="代码块"></a>代码块</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myFunction</span></span>&#123;</span><br><span class="line">	<span class="comment">//JavaScript 可以分批地组合起来。代码块的作用是一并地执行语句序列。</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="三个关键字-break-continue-return"><a href="#三个关键字-break-continue-return" class="headerlink" title="三个关键字 break \ continue \ return"></a>三个关键字 <code>break \ continue \ return</code></h4><h5 id="break"><a href="#break" class="headerlink" title="break"></a>break</h5><h5 id="continue"><a href="#continue" class="headerlink" title="continue"></a>continue</h5><h5 id="return"><a href="#return" class="headerlink" title="return"></a>return</h5><h3 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h3><p><code>6+3  (Number 、Boolean 、String 、Null 、Undefined 、Symbool) + (Array 、Object、function)</code></p>
<hr>
<blockquote>
<p>值类型(基本类型)：</p>
<p>字符串（String）、数字（Number）、布尔（Boolean）、</p>
<p>对空（Null）、未定义（Undefined）、Symbool（独一无二的值）</p>
<p>引用数据类型：对象（Object）、数组(Array)、函数（function）</p>
<p>Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。</p>
</blockquote>
<p>计算机是可以做数学计算的机器</p>
<p>计算机程序可以处理各种数值，不止可以处理数值，文本，图形，音频，视频，网页等各种各样的数据，不同的数据，需要定义不同的数据类型。</p>
<h4 id="基本数据类型-Number-Boolean-String-Null-Undefined-Symbool"><a href="#基本数据类型-Number-Boolean-String-Null-Undefined-Symbool" class="headerlink" title="基本数据类型 Number + Boolean + String + Null + Undefined + Symbool"></a>基本数据类型 Number + Boolean + String + Null + Undefined + Symbool</h4><hr>
<h5 id="Number-数字"><a href="#Number-数字" class="headerlink" title="Number 数字"></a>Number 数字</h5><hr>
<ul>
<li><p>Javascript不区分整数和浮点数，统一用Number表示</p>
</li>
<li><p>特殊情况：</p>
<p>NaN  </p>
<p>infiniry 无穷大</p>
</li>
<li><p>由于JavaScript这个设计缺陷，<em>不要</em>使用<code>==</code> 相等运算符比较，始终坚持使用<code>===</code>严格相等运算符 比较。 </p>
</li>
<li><p>科学计数法</p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> y = <span class="number">123e5</span>; <span class="comment">//12300000</span></span><br><span class="line"><span class="keyword">const</span> z = <span class="number">123e-5</span>; <span class="comment">//0.00123</span></span><br></pre></td></tr></table></figure>

<ul>
<li>唯一能判断某个值是不是数字的方法是通过<code>isNaN()</code>函数：</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">isNaN</span>(<span class="literal">NaN</span>); <span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<h5 id="String-字符串（类似数组）"><a href="#String-字符串（类似数组）" class="headerlink" title="String 字符串（类似数组）"></a>String 字符串（类似数组）</h5><hr>
<ul>
<li><p>存储和处理文本</p>
</li>
<li><p>字符串是以’’单引号或””双引号括起来的任意文本</p>
</li>
<li><p>字符串是不可变的，通过索引赋值，没有错误，也没有效果</p>
<p>操作字符串</p>
</li>
<li><p>可以使用索引位置来访问字符串中的每个字符</p>
</li>
<li><p>字符串长度：字符串.length</p>
</li>
<li><p>获取字符串的某个指定位置的字符：类似Array的下标操作，索引值从0开始</p>
</li>
<li><p>大写：字符串.toUpperCase()</p>
</li>
<li><p>小写:   字符串.toLowerCase()</p>
</li>
<li><p>指定字符串出现的位置：字符串.indexOf(‘指定字符串’)</p>
</li>
<li><p>返回指定索引区间的子串： 字符串.substring(索引区间)，只有一个为从这个索引开始到结束</p>
</li>
</ul>
<p>你也可以在字符串添加转义字符来使用引号：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var x &#x3D; &#39;It\&#39;s alright&#39;;</span><br><span class="line">var y &#x3D; &quot;He is called \&quot;Johnny\&quot;&quot;;</span><br></pre></td></tr></table></figure>



<h5 id="Boolean布尔值"><a href="#Boolean布尔值" class="headerlink" title="Boolean布尔值"></a>Boolean布尔值</h5><ul>
<li>true/false  1/0</li>
</ul>
<h5 id="null-空值-和undefined-未定义"><a href="#null-空值-和undefined-未定义" class="headerlink" title="null 空值 和undefined 未定义"></a>null 空值 和undefined 未定义</h5><ul>
<li>Undefined 表示变量不含有值</li>
<li>可以通过将变量的值设置为null来清空变量</li>
</ul>
<h6 id="声明变量类型"><a href="#声明变量类型" class="headerlink" title="声明变量类型"></a>声明变量类型</h6><p>可以使用关键字“new”来声明其类型；</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var carname&#x3D;new String;</span><br><span class="line">var x&#x3D;      new Number;</span><br><span class="line">var y&#x3D;      new Boolean;</span><br><span class="line">var cars&#x3D;   new Array;</span><br><span class="line">var person&#x3D; new Object;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。</p>
</blockquote>
<h4 id="引用数据类型-对象、数字、函数"><a href="#引用数据类型-对象、数字、函数" class="headerlink" title="引用数据类型 对象、数字、函数"></a>引用数据类型 对象、数字、函数</h4><hr>
<h5 id="数组"><a href="#数组" class="headerlink" title="数组 [ ]"></a>数组 [ ]</h5><ul>
<li>可以存储任意类型的数据类型，通过索引来访问每个元素。</li>
</ul>
<h5 id="对象-对象属性-和-对象方法"><a href="#对象-对象属性-和-对象方法" class="headerlink" title="对象 { } 对象属性 和 对象方法()"></a>对象 { } 对象属性 和 对象方法()</h5><ul>
<li>JavaScript对象是拥有<code>属性和方法</code>的数据</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">属性没有括号</span><br><span class="line"></span><br><span class="line">方法有括号</span><br></pre></td></tr></table></figure>

<ul>
<li>Javascript的对象是一组由键-值组成的无序集合（相当于map）键值对通常写法为 <strong>name : value</strong> (键与值以冒号分割)。键值对在 JavaScript 对象通常称为 <strong>对象属性</strong>。</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> person = [firstname:<span class="string">'John'</span>,<span class="attr">lastname</span>:<span class="string">'Doe'</span>,<span class="attr">id</span>:<span class="number">5566</span>];</span><br><span class="line"><span class="keyword">var</span> person = &#123;</span><br><span class="line">    name: <span class="string">'Bob'</span>,</span><br><span class="line">    age: <span class="number">20</span>,</span><br><span class="line">    tags: [<span class="string">'js'</span>, <span class="string">'web'</span>, <span class="string">'mobile'</span>],</span><br><span class="line">    city: <span class="string">'Beijing'</span>,</span><br><span class="line">    hasCar: <span class="literal">true</span>,</span><br><span class="line">    zipcode: <span class="literal">null</span></span><br><span class="line">&#125;;</span><br><span class="line">访问对象属性</span><br><span class="line">使用的方法</span><br><span class="line">name = person.lastname;</span><br><span class="line"><span class="comment">// 重点</span></span><br><span class="line">name = person[<span class="string">"lastname"</span>];</span><br><span class="line">访问对象方法</span><br><span class="line">方法一</span><br><span class="line">methodName : <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; code lines &#125;</span><br><span class="line">方法二</span><br><span class="line">objectName.methodName()</span><br></pre></td></tr></table></figure>

<ul>
<li><p>键都是字符串类型，值可以是任意数据类型。</p>
</li>
<li><p>使用：获取一个对象的属性，用<code>对象变量.属性名</code>的方式</p>
</li>
<li><p>语法注意： = 号     ,号 最后一个是没有逗号的，末尾；号</p>
</li>
<li><p>对象中的数组可以使用<code>对象变量.属性名[数字下标]</code>的方式</p>
</li>
<li><p>对象的方法定义了一个函数，并作为对象的属性存储。对象方法通过添加 () 调用 (作为一个函数)。</p>
</li>
</ul>
<h6 id="Javascript变量的生存期"><a href="#Javascript变量的生存期" class="headerlink" title="Javascript变量的生存期"></a>Javascript变量的生存期</h6><p>JavaScript 变量的生命期从它们被声明的时间开始。</p>
<p>局部变量会在函数运行以后被删除。</p>
<p>全局变量会在页面关闭后被删除。</p>
<h6 id="向未声明的-JavaScript-变量分配值"><a href="#向未声明的-JavaScript-变量分配值" class="headerlink" title="向未声明的 JavaScript 变量分配值"></a>向未声明的 JavaScript 变量分配值</h6><p><code>如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。该属性可以删除</code></p>
<p>这条语句：</p>
<p>carname=”Volvo”;</p>
<p>将声明 window 的一个属性 carname。</p>
<p>非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> var1 = <span class="number">1</span>; <span class="comment">// 不可配置全局属性</span></span><br><span class="line">var2 = <span class="number">2</span>; <span class="comment">// 没有使用 var 声明，可配置全局属性</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">this</span>.var1); <span class="comment">// 1</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>.var1); <span class="comment">// 1</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">delete</span> var1; <span class="comment">// false 无法删除</span></span><br><span class="line"><span class="built_in">console</span>.log(var1); <span class="comment">//1</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">delete</span> var2; </span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">delete</span> var2); <span class="comment">// true</span></span><br><span class="line"><span class="built_in">console</span>.log(var2); <span class="comment">// 已经删除 报错变量未定义</span></span><br></pre></td></tr></table></figure>

<hr>
<p>typeof、null、underfined、valueOf()</p>
<p>typeof()操作符 </p>
<p>你可以使用typeof操作符来检测变量的数据类型</p>
<p>在JavaScript中，数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。</p>
<p>数组是Object类型</p>
<p>null <code>什么都没有 Object 类型</code></p>
<p>null是一个只有一个值的特殊类型。表示一个空对象引用。</p>
<p>清空对象的两种方法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var person &#x3D; null;&#x2F;&#x2F; 值为null 空，但类型为对象</span><br><span class="line">var person &#x3D; underfined; &#x2F;&#x2F;值为undefined 类型为underfined</span><br></pre></td></tr></table></figure>



<p>undefined 一个没有设置值的变量</p>
<p>在 JavaScript 中, <strong>undefined</strong> 是一个没有设置值的变量。</p>
<p><strong>typeof</strong> 一个没有值的变量会返回 <strong>undefined</strong>。</p>
<p>undefined和null的区别 </p>
<p>null和undefined的值相等，但类型不等 null的类型是object</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">typeof undefined  &#x2F;&#x2F;undefined</span><br><span class="line">typeof null &#x2F;&#x2F;object</span><br><span class="line">null &#x3D;&#x3D;&#x3D; undefined false</span><br><span class="line">null &#x3D;&#x3D; undefined &#x2F;&#x2F; true</span><br></pre></td></tr></table></figure>

<h3 id="类型转换"><a href="#类型转换" class="headerlink" title="类型转换"></a>类型转换</h3><p>Number() 转换为数字，string()转换为字符串，Boolean转为布尔值。</p>
<h4 id="数据类型-6-3"><a href="#数据类型-6-3" class="headerlink" title="数据类型 6+3"></a>数据类型 6+3</h4><p>6种基本数据类型</p>
<ul>
<li>string</li>
<li>number</li>
<li>boolean</li>
<li>object</li>
<li>function</li>
<li>symbol</li>
</ul>
<p>3种对象类型</p>
<ul>
<li>Object</li>
<li>Date</li>
<li>Array</li>
</ul>
<p>2个不包含任何值的数据类型</p>
<ul>
<li>null</li>
<li>undefined</li>
</ul>
<blockquote>
<ul>
<li>NaN 的数据类型是 number</li>
<li>数组(Array)的数据类型是 object</li>
<li>日期(Date)的数据类型为 object</li>
<li>null 的数据类型是 object</li>
<li>未定义变量的数据类型为 undefined</li>
</ul>
</blockquote>
<h4 id="constructor属性"><a href="#constructor属性" class="headerlink" title="constructor属性"></a>constructor属性</h4><p>constructor属性返回所有JavaScript变量的构造函数</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&quot;John&quot;.constructor                 &#x2F;&#x2F; 返回函数 String()  &#123; [native code] &#125;</span><br><span class="line">(3.14).constructor                 &#x2F;&#x2F; 返回函数 Number()  &#123; [native code] &#125;</span><br><span class="line">false.constructor                  &#x2F;&#x2F; 返回函数 Boolean() &#123; [native code] &#125;</span><br><span class="line">[1,2,3,4].constructor              &#x2F;&#x2F; 返回函数 Array()   &#123; [native code] &#125;</span><br><span class="line">&#123;name:&#39;John&#39;, age:34&#125;.constructor  &#x2F;&#x2F; 返回函数 Object()  &#123; [native code] &#125;</span><br><span class="line">new Date().constructor             &#x2F;&#x2F; 返回函数 Date()    &#123; [native code] &#125;</span><br><span class="line">function () &#123;&#125;.constructor         &#x2F;&#x2F; 返回函数 Function()&#123; [native code] &#125;</span><br></pre></td></tr></table></figure>

<h4 id="JavaScript类型装换"><a href="#JavaScript类型装换" class="headerlink" title="JavaScript类型装换"></a>JavaScript类型装换</h4><p>JavaScript变量可以转换为新变量或其他数据类型：</p>
<p>数字=&gt;字符串 string()</p>
<p>全局方法 <strong>String()</strong> 可以将数字转换为字符串。</p>
<p>该方法可用于任何类型的数字，字母，变量，表达式：</p>
<p>Number 方法 <strong>toString()</strong> 也是有同样的效果。</p>
<table>
<thead>
<tr>
<th align="left">方法</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">toExponential()</td>
<td align="left">把对象的值转换为指数计数法。</td>
</tr>
<tr>
<td align="left">toFixed()</td>
<td align="left">把数字转换为字符串，结果的小数点后有指定位数的数字。</td>
</tr>
<tr>
<td align="left">toPrecision()</td>
<td align="left">把数字格式化为指定的长度。</td>
</tr>
<tr>
<td align="left">toString()</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">String()</td>
<td align="left"></td>
</tr>
</tbody></table>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var d &#x3D; (12312).toExponential() &#x2F;&#x2F;1.2312e+4&quot;</span><br><span class="line">var d &#x3D; (12312).toFixed(3) &#x2F;&#x2F;&quot;12312.000&quot;</span><br><span class="line">var d &#x3D; (12312).toPrecision(2) &#x2F;&#x2F;&quot;1.2e+4&quot;</span><br></pre></td></tr></table></figure>



<p>js字符与ASCII码互转 charCodeAt() String.fromCharCode()</p>
<p><a href="http://ascii.911cha.com/" target="_blank" rel="noopener">ASCII编码对照表_911查询</a></p>
<p>字符串 ==》 ASCII码 charCodeAt()</p>
<p>字符串 《=》 ASCII码 String.fromCharCode()</p>
<p>大写字母A-Z对应的ASCII码值是65-90<br>小写字母a-z对应的ASCII码值是97-122</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">将字母转为ascii嘛的方法：</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">"A"</span>;</span><br><span class="line">str.charCodeAt();  <span class="comment">// 65</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str1 = <span class="string">'a'</span>;</span><br><span class="line">str1.charCodeAt();  <span class="comment">// 97</span></span><br><span class="line"><span class="number">1</span></span><br><span class="line"><span class="number">2</span></span><br><span class="line"><span class="number">3</span></span><br><span class="line"><span class="number">4</span></span><br><span class="line"><span class="number">5</span></span><br><span class="line">将ascii码转为对应字母的方法：</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">97</span>;</span><br><span class="line"><span class="built_in">String</span>.fromCharCode(num);  <span class="comment">// 'a'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> num1 = <span class="number">100</span>;</span><br><span class="line"><span class="built_in">String</span>.fromCharCode(num1);  <span class="comment">// 'd'</span></span><br></pre></td></tr></table></figure>



<p>字符串=&gt;数字</p>
<p>全局方法 <strong>Number()</strong> 可以将字符串转换为数字。</p>
<p>字符串包含数字(如 “3.14”) 转换为数字 (如 3.14).</p>
<p>空字符串转换为 0。</p>
<p>其他的字符串会转换为 NaN (不是个数字)。</p>
<table>
<thead>
<tr>
<th align="left">方法</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">parseFloat()</td>
<td align="left">解析一个字符串，并返回一个浮点数。</td>
</tr>
<tr>
<td align="left">parseInt()</td>
<td align="left">解析一个字符串，并返回一个整数。</td>
</tr>
</tbody></table>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var str &#x3D; &#39;123.456&#39;</span><br><span class="line">Number(str);</span><br><span class="line">var x &#x3D; parseFloat(str); &#x2F;&#x2F;123.456</span><br><span class="line">va y &#x3D; parseInt(str) &#x2F;&#x2F;123</span><br></pre></td></tr></table></figure>



<p>布尔值=&gt;字符串</p>
<p>全局方法 <strong>String()</strong> 可以将布尔值转换为字符串。</p>
<p>全局方法 <strong>String()</strong> 可以将布尔值转换为字符串。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">String(false)  &#x2F;&#x2F;&quot;false&quot;</span><br><span class="line">false.toString() &#x2F;&#x2F;&quot;false&quot;</span><br></pre></td></tr></table></figure>

<p>布尔值=&gt;数字</p>
<p>全局方法 <strong>Number()</strong> 可将布尔值转换为数字。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Number(false)  &#x2F;&#x2F;0</span><br><span class="line">Number(true)  &#x2F;&#x2F;1</span><br></pre></td></tr></table></figure>



<p>日期=&gt;字符串</p>
<p>Date() 返回字符串。</p>
<p>全局方法 String() 可以将日期对象转换为字符串。</p>
<p>Date 方法 <strong>toString()</strong> 也有相同的效果。</p>
<table>
<thead>
<tr>
<th align="left">方法</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">getDate()</td>
<td align="left">从 Date 对象返回一个月中的某一天 (1 ~ 31)。</td>
</tr>
<tr>
<td align="left">getDay()</td>
<td align="left">从 Date 对象返回一周中的某一天 (0 ~ 6)。</td>
</tr>
<tr>
<td align="left">getFullYear()</td>
<td align="left">从 Date 对象以四位数字返回年份。</td>
</tr>
<tr>
<td align="left">getHours()</td>
<td align="left">返回 Date 对象的小时 (0 ~ 23)。</td>
</tr>
<tr>
<td align="left">getMilliseconds()</td>
<td align="left">返回 Date 对象的毫秒(0 ~ 999)。</td>
</tr>
<tr>
<td align="left">getMinutes()</td>
<td align="left">返回 Date 对象的分钟 (0 ~ 59)。</td>
</tr>
<tr>
<td align="left">getMonth()</td>
<td align="left">从 Date 对象返回月份 (0 ~ 11)。</td>
</tr>
<tr>
<td align="left">getSeconds()</td>
<td align="left">返回 Date 对象的秒数 (0 ~ 59)。</td>
</tr>
<tr>
<td align="left">getTime()</td>
<td align="left">返回 1970 年 1 月 1 日至今的毫秒数。</td>
</tr>
</tbody></table>
<p>日期=&gt;数字</p>
<p>全局方法 <strong>Number()</strong> 可将日期转换为数字。</p>
<p>日期方法 <strong>getTime()</strong> 也有相同的效果。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">d &#x3D; new Date();</span><br><span class="line">Number(d);</span><br><span class="line"></span><br><span class="line">d &#x3D; new Date();</span><br><span class="line">d.getTime();</span><br></pre></td></tr></table></figure>

<p>自动转换类型</p>
<p>当 JavaScript 尝试操作一个 “错误” 的数据类型时，会自动转换为 “正确” 的数据类型。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">5 + null    &#x2F;&#x2F; 返回 5         null 转换为 0</span><br><span class="line">&quot;5&quot; + null  &#x2F;&#x2F; 返回&quot;5null&quot;   null 转换为 &quot;null&quot;</span><br><span class="line">&quot;5&quot; + 1     &#x2F;&#x2F; 返回 &quot;51&quot;      1 转换为 &quot;1&quot; </span><br><span class="line">&quot;5&quot; - 1     &#x2F;&#x2F; 返回 4         &quot;5&quot; 转换为 5</span><br></pre></td></tr></table></figure>



<p>自动转换为字符串</p>
<p>当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法：</p>
<table>
<thead>
<tr>
<th align="left">原始值</th>
<th align="left">转换为数字</th>
<th align="left">转换为字符串</th>
<th align="left">转换为布尔值</th>
</tr>
</thead>
<tbody><tr>
<td align="left">false</td>
<td align="left">0</td>
<td align="left">“false”</td>
<td align="left">false</td>
</tr>
<tr>
<td align="left">true</td>
<td align="left">1</td>
<td align="left">“true”</td>
<td align="left">true</td>
</tr>
<tr>
<td align="left">0</td>
<td align="left">0</td>
<td align="left">“0”</td>
<td align="left">false</td>
</tr>
<tr>
<td align="left">1</td>
<td align="left">1</td>
<td align="left">“1”</td>
<td align="left">true</td>
</tr>
<tr>
<td align="left">“0”</td>
<td align="left">0</td>
<td align="left">“0”</td>
<td align="left">true</td>
</tr>
<tr>
<td align="left">“000”</td>
<td align="left">0</td>
<td align="left">“000”</td>
<td align="left">true</td>
</tr>
<tr>
<td align="left">“1”</td>
<td align="left">1</td>
<td align="left">“1”</td>
<td align="left">true</td>
</tr>
<tr>
<td align="left">NaN</td>
<td align="left">NaN</td>
<td align="left">“NaN”</td>
<td align="left">false</td>
</tr>
<tr>
<td align="left">Infinity</td>
<td align="left">Infinity</td>
<td align="left">“Infinity”</td>
<td align="left">true</td>
</tr>
<tr>
<td align="left">-Infinity</td>
<td align="left">-Infinity</td>
<td align="left">“-Infinity”</td>
<td align="left">true</td>
</tr>
<tr>
<td align="left">“”</td>
<td align="left">0</td>
<td align="left">“”</td>
<td align="left">false</td>
</tr>
<tr>
<td align="left">“20”</td>
<td align="left">20</td>
<td align="left">“20”</td>
<td align="left">true</td>
</tr>
<tr>
<td align="left">“Runoob”</td>
<td align="left">NaN</td>
<td align="left">“Runoob”</td>
<td align="left">true</td>
</tr>
<tr>
<td align="left">[ ]</td>
<td align="left">0</td>
<td align="left">“”</td>
<td align="left">true</td>
</tr>
<tr>
<td align="left">[20]</td>
<td align="left">20</td>
<td align="left">“20”</td>
<td align="left">true</td>
</tr>
<tr>
<td align="left">[10,20]</td>
<td align="left">NaN</td>
<td align="left">“10,20”</td>
<td align="left">true</td>
</tr>
<tr>
<td align="left">[“Runoob”]</td>
<td align="left">NaN</td>
<td align="left">“Runoob”</td>
<td align="left">true</td>
</tr>
<tr>
<td align="left">[“Runoob”,”Google”]</td>
<td align="left">NaN</td>
<td align="left">“Runoob,Google”</td>
<td align="left">true</td>
</tr>
<tr>
<td align="left">function(){}</td>
<td align="left">NaN</td>
<td align="left">“function(){}”</td>
<td align="left">true</td>
</tr>
<tr>
<td align="left">{ }</td>
<td align="left">NaN</td>
<td align="left">“[object Object]”</td>
<td align="left">true</td>
</tr>
<tr>
<td align="left">null</td>
<td align="left">0</td>
<td align="left">“null”</td>
<td align="left">false</td>
</tr>
<tr>
<td align="left">undefined</td>
<td align="left">NaN</td>
<td align="left">“undefined”</td>
<td align="left">false</td>
</tr>
</tbody></table>
<h4 id="一元运算符"><a href="#一元运算符" class="headerlink" title="一元运算符 +"></a>一元运算符 +</h4><p><strong>Operator +</strong> 可用于将变量转换为数字：</p>
<p>如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字):</p>
<h3 id="JavaScript-标准"><a href="#JavaScript-标准" class="headerlink" title="JavaScript 标准"></a>JavaScript 标准</h3><p>所有的现代浏览器完全支持 ECMAScript 3（ES3，JavaScript 的第三版，从 1999 年开始）。</p>
<p>ECMAScript 4（ES4）未通过。</p>
<p>ECMAScript 5（ES5，2009 年发布），是 JavaScript 最新的官方版本。</p>
<p>随着时间的推移，我们开始看到，所有的现代浏览器已经完全支持 ES5。</p>
<hr>
<h3 id="JavaScript-保留关键字"><a href="#JavaScript-保留关键字" class="headerlink" title="JavaScript 保留关键字"></a>JavaScript 保留关键字</h3><p>Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。</p>
<table>
<thead>
<tr>
<th>abstract</th>
<th>arguments</th>
<th>boolean</th>
<th>break</th>
<th>byte</th>
</tr>
</thead>
<tbody><tr>
<td>case</td>
<td>catch</td>
<td>char</td>
<td>class*</td>
<td>const</td>
</tr>
<tr>
<td>continue</td>
<td>debugger</td>
<td>default</td>
<td>delete</td>
<td>do</td>
</tr>
<tr>
<td>double</td>
<td>else</td>
<td>enum*</td>
<td>eval</td>
<td>export*</td>
</tr>
<tr>
<td>extends*</td>
<td>false</td>
<td>final</td>
<td>finally</td>
<td>float</td>
</tr>
<tr>
<td>for</td>
<td>function</td>
<td>goto</td>
<td>if</td>
<td>implements</td>
</tr>
<tr>
<td>import*</td>
<td>in</td>
<td>instanceof</td>
<td>int</td>
<td>interface</td>
</tr>
<tr>
<td>let</td>
<td>long</td>
<td>native</td>
<td>new</td>
<td>null</td>
</tr>
<tr>
<td>package</td>
<td>private</td>
<td>protected</td>
<td>public</td>
<td>return</td>
</tr>
<tr>
<td>short</td>
<td>static</td>
<td>super*</td>
<td>switch</td>
<td>synchronized</td>
</tr>
<tr>
<td>this</td>
<td>throw</td>
<td>throws</td>
<td>transient</td>
<td>true</td>
</tr>
<tr>
<td>try</td>
<td>typeof</td>
<td>var</td>
<td>void</td>
<td>volatile</td>
</tr>
<tr>
<td>while</td>
<td>with</td>
<td>yield</td>
<td></td>
<td></td>
</tr>
</tbody></table>
<p>* 标记的关键字是 ECMAScript5 中新添加的。</p>
<hr>
<h3 id="JavaScript-对象、属性和方法"><a href="#JavaScript-对象、属性和方法" class="headerlink" title="JavaScript 对象、属性和方法"></a>JavaScript 对象、属性和方法</h3><p>您也应该避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名：</p>
<table>
<thead>
<tr>
<th>Array</th>
<th>Date</th>
<th>eval</th>
<th>function</th>
<th>hasOwnProperty</th>
</tr>
</thead>
<tbody><tr>
<td>Infinity</td>
<td>isFinite</td>
<td>isNaN</td>
<td>isPrototypeOf</td>
<td>length</td>
</tr>
<tr>
<td>Math</td>
<td>NaN</td>
<td>name</td>
<td>Number</td>
<td>Object</td>
</tr>
<tr>
<td>prototype</td>
<td>String</td>
<td>toString</td>
<td>undefined</td>
<td>valueOf</td>
</tr>
</tbody></table>
<hr>
<h3 id="Java-保留关键字"><a href="#Java-保留关键字" class="headerlink" title="Java 保留关键字"></a>Java 保留关键字</h3><p>JavaScript 经常与 Java 一起使用。您应该避免使用一些 Java 对象和属性作为 JavaScript 标识符：</p>
<table>
<thead>
<tr>
<th>getClass</th>
<th>java</th>
<th>JavaArray</th>
<th>javaClass</th>
<th>JavaObject</th>
<th>JavaPackage</th>
</tr>
</thead>
<tbody><tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody></table>
<hr>
<h3 id="Windows-保留关键字"><a href="#Windows-保留关键字" class="headerlink" title="Windows 保留关键字"></a>Windows 保留关键字</h3><p>JavaScript 可以在 HTML 外部使用。它可在许多其他应用程序中作为编程语言使用。</p>
<p>在 HTML 中，您必须（为了可移植性，您也应该这么做）避免使用 HTML 和 Windows 对象和属性的名称作为 Javascript 的变量及函数名：</p>
<table>
<thead>
<tr>
<th>alert</th>
<th>all</th>
<th>anchor</th>
<th>anchors</th>
<th>area</th>
</tr>
</thead>
<tbody><tr>
<td>assign</td>
<td>blur</td>
<td>button</td>
<td>checkbox</td>
<td>clearInterval</td>
</tr>
<tr>
<td>clearTimeout</td>
<td>clientInformation</td>
<td>close</td>
<td>closed</td>
<td>confirm</td>
</tr>
<tr>
<td>constructor</td>
<td>crypto</td>
<td>decodeURI</td>
<td>decodeURIComponent</td>
<td>defaultStatus</td>
</tr>
<tr>
<td>document</td>
<td>element</td>
<td>elements</td>
<td>embed</td>
<td>embeds</td>
</tr>
<tr>
<td>encodeURI</td>
<td>encodeURIComponent</td>
<td>escape</td>
<td>event</td>
<td>fileUpload</td>
</tr>
<tr>
<td>focus</td>
<td>form</td>
<td>forms</td>
<td>frame</td>
<td>innerHeight</td>
</tr>
<tr>
<td>innerWidth</td>
<td>layer</td>
<td>layers</td>
<td>link</td>
<td>location</td>
</tr>
<tr>
<td>mimeTypes</td>
<td>navigate</td>
<td>navigator</td>
<td>frames</td>
<td>frameRate</td>
</tr>
<tr>
<td>hidden</td>
<td>history</td>
<td>image</td>
<td>images</td>
<td>offscreenBuffering</td>
</tr>
<tr>
<td>open</td>
<td>opener</td>
<td>option</td>
<td>outerHeight</td>
<td>outerWidth</td>
</tr>
<tr>
<td>packages</td>
<td>pageXOffset</td>
<td>pageYOffset</td>
<td>parent</td>
<td>parseFloat</td>
</tr>
<tr>
<td>parseInt</td>
<td>password</td>
<td>pkcs11</td>
<td>plugin</td>
<td>prompt</td>
</tr>
<tr>
<td>propertyIsEnum</td>
<td>radio</td>
<td>reset</td>
<td>screenX</td>
<td>screenY</td>
</tr>
<tr>
<td>scroll</td>
<td>secure</td>
<td>select</td>
<td>self</td>
<td>setInterval</td>
</tr>
<tr>
<td>setTimeout</td>
<td>status</td>
<td>submit</td>
<td>taint</td>
<td>text</td>
</tr>
<tr>
<td>textarea</td>
<td>top</td>
<td>unescape</td>
<td>untaint</td>
<td>window</td>
</tr>
</tbody></table>
<hr>
<h3 id="HTML-事件句柄"><a href="#HTML-事件句柄" class="headerlink" title="HTML 事件句柄"></a>HTML 事件句柄</h3><p>除此之外，您还应该避免使用 HTML 事件句柄的名称作为 Javascript 的变量及函数名。</p>
<p>实例：</p>
<table>
<thead>
<tr>
<th>onblur</th>
<th>onclick</th>
<th>onerror</th>
<th>onfocus</th>
</tr>
</thead>
<tbody><tr>
<td>onkeydown</td>
<td>onkeypress</td>
<td>onkeyup</td>
<td>onmouseover</td>
</tr>
<tr>
<td>onload</td>
<td>onmouseup</td>
<td>onmousedown</td>
<td>onsubmit</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody></table>
<hr>
<h3 id="非标准-JavaScript"><a href="#非标准-JavaScript" class="headerlink" title="非标准 JavaScript"></a>非标准 JavaScript</h3><p>除了保留关键字，在 JavaScript 实现中也有一些非标准的关键字。</p>
<p>一个实例是 <strong>const</strong> 关键字，用于定义变量。 一些 JavaScript 引擎把 const 当作 var 的同义词。另一些引擎则把 const 当作只读变量的定义。</p>
<p>Const 是 JavaScript 的扩展。JavaScript 引擎支持它用在 Firefox 和 Chrome 中。但是它并不是 JavaScript 标准 ES3 或 ES5 的组成部分。<strong>建议：不要使用它</strong>。</p>
<p>this</p>
<h4 id="JavaScript-this-关键字"><a href="#JavaScript-this-关键字" class="headerlink" title="JavaScript this 关键字"></a>JavaScript this 关键字</h4><p>面向对象语言中 this 表示当前对象的一个引用。</p>
<p>但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。</p>
<ul>
<li>在方法中，this 表示该方法所属的对象。</li>
<li>如果单独使用，this 表示全局对象。</li>
<li>在函数中，this 表示全局对象。</li>
<li>在函数中，在严格模式下，this 是未定义的(undefined)。</li>
<li>在事件中，this 表示接收事件的元素。</li>
<li>类似 call() 和 apply() 方法可以将 this 引用到任何对象。</li>
</ul>
<p>var person = {  firstName: “John”,  lastName : “Doe”,  id       : 5566,  fullName : function() {    return this.firstName + “ “ + this.lastName;  } };</p>
<p><a href="https://www.runoob.com/try/try.php?filename=tryjs_this_method" target="_blank" rel="noopener">»</a></p>
<hr>
<h3 id="方法中的-this"><a href="#方法中的-this" class="headerlink" title="方法中的 this"></a>方法中的 this</h3><p>在对象方法中， this 指向调用它所在方法的对象。</p>
<p>在上面一个实例中，this 表示 person 对象。</p>
<p>fullName 方法所属的对象就是 person。</p>
<p>fullName : function() {  return this.firstName + “ “ + this.lastName; }</p>
<p><a href="https://www.runoob.com/try/try.php?filename=tryjs_this_method" target="_blank" rel="noopener">»</a></p>
<hr>
<h3 id="单独使用-this"><a href="#单独使用-this" class="headerlink" title="单独使用 this"></a>单独使用 this</h3><p>单独使用 this，则它指向全局(Global)对象。</p>
<p>在浏览器中，window 就是该全局对象为 [<strong>object Window</strong>]:</p>
<h3 id=""><a href="#" class="headerlink" title=""></a></h3><p>var x = this;</p>
<p><a href="https://www.runoob.com/try/try.php?filename=tryjs_this" target="_blank" rel="noopener">»</a></p>
<p>严格模式下，如果单独使用，this 也是指向全局(Global)对象。</p>
<h3 id="-1"><a href="#-1" class="headerlink" title=""></a></h3><p>“use strict”; var x = this;</p>
<p><a href="https://www.runoob.com/try/try.php?filename=tryjs_this_alone" target="_blank" rel="noopener">»</a></p>
<hr>
<h3 id="函数中使用-this（默认）"><a href="#函数中使用-this（默认）" class="headerlink" title="函数中使用 this（默认）"></a>函数中使用 this（默认）</h3><p>在函数中，函数的所属者默认绑定到 this 上。</p>
<p>在浏览器中，window 就是该全局对象为 [<strong>object Window</strong>]:</p>
<p>function myFunction() {  return this; }</p>
<p><a href="https://www.runoob.com/try/try.php?filename=tryjs_this_function" target="_blank" rel="noopener">»</a></p>
<hr>
<h3 id="函数中使用-this（严格模式）"><a href="#函数中使用-this（严格模式）" class="headerlink" title="函数中使用 this（严格模式）"></a>函数中使用 this（严格模式）</h3><p>严格模式下函数是没有绑定到 this 上，这时候 this 是 <strong>undefined</strong>。</p>
<p>“use strict”; function myFunction() {  return this; }</p>
<p><a href="https://www.runoob.com/try/try.php?filename=tryjs_this_strict" target="_blank" rel="noopener">»</a></p>
<hr>
<h3 id="事件中的-this"><a href="#事件中的-this" class="headerlink" title="事件中的 this"></a>事件中的 this</h3><p>在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：</p>
<hr>
<h3 id="对象方法中绑定"><a href="#对象方法中绑定" class="headerlink" title="对象方法中绑定"></a>对象方法中绑定</h3><p>下面实例中，this 是 person 对象，person 对象是函数的所有者：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"></span><br><span class="line">var person &#x3D; &#123;  firstName  : &quot;John&quot;,  lastName   : &quot;Doe&quot;,  id         : 5566,  myFunction : function() &#123;    return this;  &#125; &#125;;</span><br><span class="line">var person &#x3D; &#123;  firstName: &quot;John&quot;,  lastName : &quot;Doe&quot;,  id       : 5566,  fullName : function() &#123;    return this.firstName + &quot; &quot; + this.lastName;  &#125; &#125;;</span><br></pre></td></tr></table></figure>

<p>说明: <strong>this.firstName</strong> 表示 <strong>this</strong> (person) 对象的 <strong>firstName</strong> 属性。</p>
<hr>
<h3 id="显式函数绑定"><a href="#显式函数绑定" class="headerlink" title="显式函数绑定"></a>显式函数绑定</h3><p>在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。</p>
<p>在下面实例中，当我们使用 person2 作为参数来调用 person1.fullName 方法时, <strong>this</strong> 将指向 person2, 即便它是 person1 的方法：</p>
<p>var person1 = {  fullName: function() {    return this.firstName + “ “ + this.lastName;  } } var person2 = {  firstName:”John”,  lastName: “Doe”, } person1.fullName.call(person2);  // 返回 “John Doe”</p>
<h3 id="错误-throw-try-catch"><a href="#错误-throw-try-catch" class="headerlink" title="错误 throw try catch"></a>错误 throw try catch</h3><h4 id="try语句测试代码块的错误。"><a href="#try语句测试代码块的错误。" class="headerlink" title="try语句测试代码块的错误。"></a>try语句测试代码块的错误。</h4><p>catch语句处理错误</p>
<p>throw语句创建自定义错误</p>
<p>finally语句在try和catch语句之后，无论是否触发异常，该语句都会执行。</p>
<p>JavaScript 错误</p>
<p>当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。</p>
<p>可能是语法错误，通常是程序员造成的编码错误或错别字。</p>
<p>可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。</p>
<p>可能是由于来自服务器或用户的错误输出而导致的错误。</p>
<p>当然，也可能是由于许多其他不可预知的因素。</p>
<p>JavaScript 抛出（throw）错误<br>当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。</p>
<p>描述这种情况的技术术语是：JavaScript 将抛出一个错误。</p>
<h4 id="JavaScript-try-和-catch"><a href="#JavaScript-try-和-catch" class="headerlink" title="JavaScript try 和 catch"></a>JavaScript try 和 catch</h4><p>try 语句允许我们定义在执行时进行错误测试的代码块。</p>
<p>catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。</p>
<p>JavaScript 语句 try 和 catch 是成对出现的。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">try &#123;</span><br><span class="line">    ...    &#x2F;&#x2F;异常的抛出</span><br><span class="line">&#125; catch(e) &#123;</span><br><span class="line">    ...    &#x2F;&#x2F;异常的捕获与处理</span><br><span class="line">&#125; finally &#123;</span><br><span class="line">    ...    &#x2F;&#x2F;结束处理</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="finally-语句"><a href="#finally-语句" class="headerlink" title="finally 语句"></a>finally 语句</h4><p>finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。</p>
<h4 id="Throw-语句"><a href="#Throw-语句" class="headerlink" title="Throw 语句"></a>Throw 语句</h4><p>throw 语句允许我们创建自定义错误。</p>
<p>正确的技术术语是：创建或<strong>抛出异常</strong>（exception）。</p>
<p>如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">throw exception</span><br></pre></td></tr></table></figure>

<p>异常可以是 JavaScript 字符串、数字、逻辑值或对象。</p>
<h3 id="调试"><a href="#调试" class="headerlink" title="调试"></a>调试</h3><p>JavaSript调试工具</p>
<p>在程序代码中寻找错误叫做代码调试。</p>
<p>调试很难，但幸运的是，很多浏览器都内置了调试工具。</p>
<p>内置的调试工具可以开始或关闭，严重的错误信息会发送给用户。</p>
<p>有了调试工具，我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。</p>
<p>浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 “Console” 。</p>
<p>设置断点</p>
<p>在调试窗口中，你可以设置 JavaScript 代码的断点。</p>
<p>在每个断点上，都会停止执行 JavaScript 代码，以便于我们检查 JavaScript 变量的值。</p>
<p>在检查完毕后，可以重新执行代码（如播放按钮）</p>
<p>debugger 关键字<br>debugger 关键字用于停止执行 JavaScript，并调用调试函数。</p>
<p>这个关键字与在调试工具中设置断点的效果是一样的。</p>
<p>如果没有调试可用，debugger 语句将无法工作。</p>
<p>开启 debugger ，代码在第三行前停止执行。</p>
<p>主要浏览器的调试工具</p>
<p>Chrome 浏览器 f12 浏览器</p>
<p>变量提升（hoisting）  <code>定义 var a; 初始化 var a = 100</code></p>
<p>变量提升的是var y 定义</p>
<p>JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。</p>
<p>JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。</p>
<p>变量提升：函数声明和变量声明总是会被解释器悄悄地被”提升”到方法体的最顶部。</p>
<p>JavaScript 初始化不会提升<br>JavaScript 只有声明的变量会提升，初始化的不会。</p>
<p>变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。</p>
<p>在头部声明你的变量<br>对于大多数程序员来说并不知道 JavaScript 变量提升。</p>
<p>如果程序员不能很好的理解变量提升，他们写的程序就容易出现一些问题。</p>
<p>为了避免这些问题，通常我们在每个作用域开始前声明这些变量，这也是正常的 JavaScript 解析步骤，易于我们理解。</p>
<p>JavaScript 严格模式(strict mode)不允许使用未声明的变量。<br>在下一个章节中我们将会学习到 “严格模式(strict mode)” </p>
<h3 id="严格模式"><a href="#严格模式" class="headerlink" title="严格模式"></a>严格模式</h3><h5 id="strict模式（严格模式）"><a href="#strict模式（严格模式）" class="headerlink" title="strict模式（严格模式）"></a>strict模式（严格模式）</h5><p>JavaScript在设计之初，为了方便初学者学习，并不强制要求用<code>var</code>申明变量。这个设计错误带来了严重的后果：如果一个变量没有通过<code>var</code>申明就被使用，那么该变量就自动被申明为全局变量：在同一个页面的不同的JavaScript文件中。</p>
<p>如果都不用<code>var</code>申明，恰好都使用了变量<code>i</code>，将造成变量<code>i</code>互相影响，产生难以调试的错误结果。</p>
<p>使用<code>var</code>申明的变量则不是全局变量，它的范围被限制在该变量被申明的函数体内（函数的概念将稍后讲解），同名变量在不同的函数体内互不冲突。</p>
<p>ECMA在后续的版本中推出strict模式</p>
<p>使用方法：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">'use strict'</span>;</span><br></pre></td></tr></table></figure>

<p>JavaScript 严格模式（strict mode）即在严格的条件下运行。</p>
<p>“use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。</p>
<p>它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。</p>
<p>“use strict” 的目的是指定代码在严格条件下执行。</p>
<p><code>严格模式下你不能使用未声明的变量。</code></p>
<p>为什么使用严格模式:</p>
<ul>
<li><p>消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;</p>
</li>
<li><p>消除代码运行的一些不安全之处，保证代码运行的安全；</p>
</li>
<li><p>提高编译器效率，增加运行速度；</p>
</li>
<li><p>为未来新版本的Javascript做好铺垫。</p>
</li>
</ul>
<p>“严格模式”体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。</p>
<p>另一方面，同样的代码，在”严格模式”中，可能会有不一样的运行结果；一些在”正常模式”下可以运行的语句，在”严格模式”下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。</p>
<p>不允许使用未声明的变量：</p>
<p> 对象也是一个变量。</p>
<p>不允许删除变量或对象。</p>
<p>不允许变量重名:</p>
<p>不允许使用八进制:</p>
<p>不允许使用转义字符:</p>
<p>不允许对只读属性赋值:</p>
<p>不允许对只读属性赋值:</p>
<p>不允许对一个使用getter方法读取的属性进行赋值</p>
<p>不允许删除一个不允许删除的属性：</p>
<p>变量名不能使用 “eval” 字符串:</p>
<p>变量名不能使用 “arguments” 字符串:</p>
<p>不允许使用以下这种语句:</p>
<p>由于一些安全原因，在作用域 eval() 创建的变量不能被调用：</p>
<p>禁止this关键字指向全局对象。</p>
<p>保留关键字</p>
<p>为了向将来Javascript的新版本过渡，严格模式新增了一些保留关键字：</p>
<ul>
<li><p>implements</p>
</li>
<li><p>interface</p>
</li>
<li><p>let</p>
</li>
<li><p>package</p>
</li>
<li><p>private</p>
</li>
<li><p>protected</p>
</li>
<li><p>public</p>
</li>
<li><p>static</p>
</li>
<li><p>yield</p>
<p>“use strict” 指令只允许出现在脚本或函数的开头</p>
</li>
</ul>
<h3 id="使用误区"><a href="#使用误区" class="headerlink" title="使用误区"></a>使用误区</h3><p>赋值运算符应用错误<br>在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)。</p>
<p>比较运算符常见错误<br>在常规的比较中，数据类型是被忽略的，以下 if 条件语句返回 true：</p>
<p>在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，以下 if 条件语句返回 false：</p>
<p>加法与连接注意事项<br>加法是两个数字相加。</p>
<p>连接是两个字符串连接。</p>
<p>JavaScript 的加法和连接都使用 + 运算符。</p>
<p>接下来我们可以通过实例查看两个数字相加及数字与字符串连接的区别：</p>
<p>浮点型数据使用注意事项<br>JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。</p>
<p>所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">var x &#x3D; 0.1;</span><br><span class="line">var y &#x3D; 0.2;</span><br><span class="line">var z &#x3D; x + y            &#x2F;&#x2F; z 的结果为 0.30000000000000004</span><br><span class="line">if (z &#x3D;&#x3D; 0.3)            &#x2F;&#x2F; 返回 false</span><br><span class="line">为解决以上问题，可以用整数的乘除法来解决：</span><br><span class="line">var z &#x3D; (x * 10 + y * 10) &#x2F; 10;       &#x2F;&#x2F; z 的结果为 0.3</span><br></pre></td></tr></table></figure>

<p>JavaScript 字符串分行<br>JavaScript 允许我们在字符串中使用断行语句:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var x &#x3D;</span><br><span class="line">&quot;Hello World!&quot;;</span><br><span class="line"></span><br><span class="line">var x &#x3D; &quot;Hello</span><br><span class="line">World!&quot;;</span><br></pre></td></tr></table></figure>

<p>但是，在字符串中直接使用回车换行是会报错的：</p>
<p>return 语句使用注意事项<br>JavaScript 默认是在代码的最后一行自动结束。</p>
<p>数组中使用名字来索引<br>许多程序语言都允许使用名字来作为数组的索引。</p>
<p>使用名字来作为索引的数组称为关联数组(或哈希)。</p>
<p>JavaScript 不支持使用名字来索引数组，只允许使用数字索引。</p>
<p>在 JavaScript 中, 对象 使用 名字作为索引。</p>
<p>如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象。</p>
<p>执行这样操作后，数组的方法及属性将不能再使用，否则会产生错误:</p>
<p>实例</p>
<p>Undefined 不是 Null<br>在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。</p>
<p>对象只有被定义才有可能为 null，否则为 undefined。</p>
<p>如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。</p>
<p>错误的使用方式：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">if (myObj !&#x3D;&#x3D; null &amp;&amp; typeof myObj !&#x3D;&#x3D; &quot;undefined&quot;) </span><br><span class="line">正确的方式是我们需要先使用 typeof 来检测对象是否已定义：</span><br><span class="line"></span><br><span class="line">if (typeof myObj !&#x3D;&#x3D; &quot;undefined&quot; &amp;&amp; myObj !&#x3D;&#x3D; null)</span><br></pre></td></tr></table></figure>

<p>程序块作用域<br>在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。</p>
<p>以下代码的的变量 i 返回 10，而不是 undefined：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">for (var i &#x3D; 0; i &lt; 10; i++) &#123;</span><br><span class="line">    &#x2F;&#x2F; some code</span><br><span class="line">&#125;</span><br><span class="line">return i;</span><br></pre></td></tr></table></figure>





<h2 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h2><p><code>定义、参数、调用、闭包</code></p>
<h3 id="函数-function"><a href="#函数-function" class="headerlink" title="函数 function"></a>函数 function</h3><p>函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">带参数</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">functionname</span>(<span class="params">val1,val2</span>)</span>&#123;</span><br><span class="line">	代码</span><br><span class="line">&#125;</span><br><span class="line">functionname(argument1,argument2);</span><br><span class="line">带返回值</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">functionname</span>(<span class="params">val1,val2</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">const</span> x = <span class="number">5</span>;</span><br><span class="line">    <span class="keyword">return</span> x;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>######</p>
<h3 id="定义-构造函数、匿名函数、自调用函数、函数提升、ES6箭头函数"><a href="#定义-构造函数、匿名函数、自调用函数、函数提升、ES6箭头函数" class="headerlink" title="定义 构造函数、匿名函数、自调用函数、函数提升、ES6箭头函数"></a>定义 <code>构造函数、匿名函数、自调用函数、函数提升、ES6箭头函数</code></h3><p>JavaScript使用关键字function定义函数</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">function functionName(parameters)&#123;</span><br><span class="line">	函数体;</span><br><span class="line">	return ;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h4 id="函数可以为一个值使用"><a href="#函数可以为一个值使用" class="headerlink" title="函数可以为一个值使用"></a>函数可以为一个值使用</h4><h4 id="构造函数-不常使用构造函数，避免使用关键字new"><a href="#构造函数-不常使用构造函数，避免使用关键字new" class="headerlink" title="构造函数 不常使用构造函数，避免使用关键字new"></a>构造函数 <code>不常使用构造函数，避免使用关键字new</code></h4><p>通过内置的JavaScript函数构造器（Function()）定义</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var myFunction &#x3D; new Function(&quot;a&quot;,&quot;b&quot;,&quot;return a + b&quot;);</span><br><span class="line">var x &#x3D; myFunction(8,9);</span><br></pre></td></tr></table></figure>



<h4 id="匿名函数"><a href="#匿名函数" class="headerlink" title="匿名函数"></a>匿名函数</h4><p>函数没有名称，函数存储在变量中，不需要函数名称，通常通过变量名来调用。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> z = <span class="function"><span class="keyword">function</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">return</span> a * b;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> z = x(<span class="number">10</span>,<span class="number">9</span>);</span><br><span class="line"><span class="built_in">console</span>.log(z)</span><br></pre></td></tr></table></figure>



<h4 id="函数提升-Hoisting-使用表达式定义函数时无法提升"><a href="#函数提升-Hoisting-使用表达式定义函数时无法提升" class="headerlink" title="函数提升(Hoisting) 使用表达式定义函数时无法提升"></a>函数提升(Hoisting) <code>使用表达式定义函数时无法提升</code></h4><p>提升（Hoisting）是JavaScript默认将当前作用域提升到前面去的行为</p>
<p>提升（Hoisting）应用在变量的声明与函数的声明。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">myFunction(<span class="number">5</span>);</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myFunction</span>(<span class="params">y</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> y * y;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h4 id="函数是一个对象"><a href="#函数是一个对象" class="headerlink" title="函数是一个对象"></a>函数是一个对象</h4><p>==JavaScript 函数有属性和方法==</p>
<p>在 JavaScript 中使用 <strong>typeof</strong> 操作符判断函数类型将返回 “function” 。</p>
<p>arguments.length 属性返回函数调用过程接收到的参数个数：</p>
<p>toString() 方法将函数作为一个字符串返回:</p>
<h4 id="自调用函数"><a href="#自调用函数" class="headerlink" title="自调用函数"></a><font color="red">自调用函数</font></h4><p><code>自调用表达式会自动调用、表达式后面紧跟 () ,则会自动调用、不能调用声明的函数</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> x = <span class="string">"Hello!!"</span>;      <span class="comment">// 我将调用自己</span></span><br><span class="line">    alert(x);</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>



<h4 id="ES6-箭头函数-解决的是匿名函数，没有函数名的"><a href="#ES6-箭头函数-解决的是匿名函数，没有函数名的" class="headerlink" title="ES6 箭头函数 解决的是匿名函数，没有函数名的"></a><font color="red">ES6 箭头函数</font> <code>解决的是匿名函数，没有函数名的</code></h4><p>箭头函数表达式的语法比普通函数表达式更简洁</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="function"><span class="keyword">function</span>(<span class="params">x,y</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">return</span> x * y;</span><br><span class="line">&#125; </span><br><span class="line">x(<span class="number">12</span>,<span class="number">90</span>);</span><br><span class="line"><span class="comment">// x 函数名/变量名 匿名函数</span></span><br><span class="line"></span><br><span class="line">多个函数</span><br><span class="line">(参数<span class="number">1</span>,参数<span class="number">2</span>,参数<span class="number">3</span>)=&gt;&#123;函数声明&#125;</span><br><span class="line"></span><br><span class="line">单一函数</span><br><span class="line">(单一参数)=&gt;&#123;函数声明&#125;</span><br><span class="line">单一参数 =&gt;&#123;函数声明&#125;</span><br><span class="line"></span><br><span class="line">没有参数</span><br><span class="line">()=&gt;&#123;函数声明&#125;</span><br></pre></td></tr></table></figure>

<p>有的箭头函数都没有自己的 <strong>this</strong>。 不适合定义一个 <strong>对象的方法</strong>。</p>
<p>当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。</p>
<p>箭头函数是不能提升的，所以需要在使用之前定义。</p>
<p>使用 <strong>const</strong> 比使用 <strong>var</strong> 更安全，因为函数表达式始终是一个常量。</p>
<p>如果函数部分只是一个语句，则可以省略 return 关键字和大括号 {}，这样做是一个比较好的习惯:</p>
<h3 id="参数-显式参数与隐式参数-参数默认值-arguments-对象-通过值（对象）传递参数"><a href="#参数-显式参数与隐式参数-参数默认值-arguments-对象-通过值（对象）传递参数" class="headerlink" title="参数 显式参数与隐式参数 参数默认值 arguments 对象 通过值（对象）传递参数"></a>参数 <code>显式参数与隐式参数 参数默认值 arguments 对象 通过值（对象）传递参数</code></h3><p>JavaScript 函数对参数的值没有进行任何的检查。</p>
<h4 id="函数显式参数-Parameters-与隐式参数-Arguments"><a href="#函数显式参数-Parameters-与隐式参数-Arguments" class="headerlink" title="函数显式参数(Parameters)与隐式参数(Arguments)"></a>函数显式参数(Parameters)与隐式参数(Arguments)</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">functionName(parameter1, parameter2, parameter3) &#123;    <span class="comment">// 要执行的代码…… &#125;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>函数显式参数<code>形参</code>在函数定义时列出。</li>
<li>函数隐式参数<code>实参</code>在函数调用时传递给函数真正的值。</li>
</ul>
<hr>
<h4 id="参数规则"><a href="#参数规则" class="headerlink" title="参数规则"></a>参数规则</h4><ul>
<li>JavaScript 函数定义显式参数时没有指定数据类型。</li>
<li>JavaScript 函数对隐式参数没有进行类型检测。</li>
<li>JavaScript 函数对隐式参数的个数没有进行检测。</li>
</ul>
<hr>
<h4 id="默认参数"><a href="#默认参数" class="headerlink" title="默认参数"></a>默认参数</h4><ul>
<li><strong>ES5 中如果函数在调用时未提供隐式参数，参数会默认设置为： undefined</strong></li>
<li>有时这是可以接受的，但是建议最好为参数设置一个默认值：</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myFunction</span>(<span class="params">x, y</span>) </span>&#123;    <span class="keyword">if</span> (y === <span class="literal">undefined</span>) &#123;          y = <span class="number">0</span>;    &#125;  &#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myFunction</span>(<span class="params">x, y</span>) </span>&#123;    y = y || <span class="number">0</span>; &#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>如果y已经定义 ， y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。</p>
</blockquote>
<p>如果函数调用时设置了过多的参数，参数将无法被引用，因为无法找到对应的参数名。 只能使用 arguments 对象来调用。</p>
<h4 id="ES6-函数可以自带参数（默认值）"><a href="#ES6-函数可以自带参数（默认值）" class="headerlink" title="ES6 函数可以自带参数（默认值）"></a>ES6 函数可以自带参数（默认值）</h4><p>ES6 支持函数带有默认参数，就判断 undefined 和 || 的操作：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myFunction</span>(<span class="params">x, y = <span class="number">10</span></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// y is 10 if not passed or undefined</span></span><br><span class="line">    <span class="keyword">return</span> x + y;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">myFunction(<span class="number">0</span>, <span class="number">2</span>) <span class="comment">// 输出 2</span></span><br><span class="line">myFunction(<span class="number">5</span>); <span class="comment">// 输出 15, y 参数的默认值</span></span><br></pre></td></tr></table></figure>



<hr>
<h4 id="arguments-对象"><a href="#arguments-对象" class="headerlink" title="arguments 对象"></a>arguments 对象</h4><p><strong>JavaScript 函数有个内置的对象 arguments 对象。</strong></p>
<p>argument 对象包含了函数调用的参数数组。</p>
<p>通过这种方式你可以很方便的找到最大的一个参数的值：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">x = findMax(<span class="number">1</span>, <span class="number">123</span>, <span class="number">500</span>, <span class="number">115</span>, <span class="number">44</span>, <span class="number">88</span>);</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">findMax</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> i, max = <span class="built_in">arguments</span>[<span class="number">0</span>];</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">arguments</span>.length &lt; <span class="number">2</span>) <span class="keyword">return</span> max;</span><br><span class="line"> </span><br><span class="line">    <span class="keyword">for</span> (i = <span class="number">0</span>; i &lt; <span class="built_in">arguments</span>.length; i++) &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">arguments</span>[i] &gt; max) &#123;</span><br><span class="line">            max = <span class="built_in">arguments</span>[i];</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> max;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p>或者创建一个函数用来统计所有数值的和：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">x = sumAll(<span class="number">1</span>, <span class="number">123</span>, <span class="number">500</span>, <span class="number">115</span>, <span class="number">44</span>, <span class="number">88</span>);</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sumAll</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> i, sum = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">for</span> (i = <span class="number">0</span>; i &lt; <span class="built_in">arguments</span>.length; i++) &#123;</span><br><span class="line">        sum += <span class="built_in">arguments</span>[i];</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> sum;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h4 id="通过值传递参数"><a href="#通过值传递参数" class="headerlink" title="通过值传递参数"></a>通过值传递参数</h4><p>在函数中调用的参数是函数的隐式参数。</p>
<p>JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。</p>
<p>如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）。</p>
<p>隐式参数的改变在函数外是不可见的。</p>
<hr>
<h4 id="通过对象传递参数"><a href="#通过对象传递参数" class="headerlink" title="通过对象传递参数"></a>通过对象传递参数</h4><p>在JavaScript中，可以引用对象的值。</p>
<p>因此我们在函数内部修改对象的属性就会修改其初始的值。</p>
<p>修改对象属性可作用于函数外部（全局变量）。</p>
<p>修改对象属性在函数外是可见的。</p>
<h3 id="调用-调用-this的指代问题-JavaScript-函数有-4-种调用方式。"><a href="#调用-调用-this的指代问题-JavaScript-函数有-4-种调用方式。" class="headerlink" title="调用    调用 || this的指代问题 JavaScript 函数有 4 种调用方式。"></a>调用    <code>调用 || this的指代问题 JavaScript 函数有 4 种调用方式。</code></h3><h3 id="作为一个函数调用、函数作为方法调用（Object）、使用构造函数调用函数、作为函数方法调用函数"><a href="#作为一个函数调用、函数作为方法调用（Object）、使用构造函数调用函数、作为函数方法调用函数" class="headerlink" title="==作为一个函数调用、函数作为方法调用（Object）、使用构造函数调用函数、作为函数方法调用函数=="></a>==作为一个函数调用、函数作为方法调用（Object）、使用构造函数调用函数、作为函数方法调用函数==</h3><p>每种方式的不同在于 <strong>this</strong> 的初始化。</p>
<h4 id="this关键字"><a href="#this关键字" class="headerlink" title="this关键字"></a>this关键字</h4><p><strong>this指向函数执行时的当前对象，this是保留关键字，不能修改this的值</strong></p>
<p>随着函数使用场合的不同，this 的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">alert(this); &#x2F;&#x2F;[Object Window]</span><br></pre></td></tr></table></figure>

<h4 id="调用JavaScript函数"><a href="#调用JavaScript函数" class="headerlink" title="调用JavaScript函数"></a>调用JavaScript函数</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">myFunction(10,2);</span><br></pre></td></tr></table></figure>



<h4 id="一、作为一个函数调用"><a href="#一、作为一个函数调用" class="headerlink" title="一、作为一个函数调用"></a>一、作为一个函数调用</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myFunction</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">return</span> a * b;</span><br><span class="line">&#125;</span><br><span class="line">myFunction(<span class="number">10</span>,<span class="number">2</span>);  <span class="comment">//浏览器窗口（window对象 默认全局对象）</span></span><br><span class="line">== <span class="built_in">window</span>.myFunction(<span class="number">10</span>, <span class="number">2</span>);    <span class="comment">// window.myFunction(10, 2) 返回 20</span></span><br></pre></td></tr></table></figure>

<ul>
<li>以上函数不属于任何对象。但是<code>在 JavaScript 中它始终是默认的全局对象</code>。</li>
<li><code>在 HTML 中默认的全局对象是 HTML 页面本身</code>，所以函数是属于 HTML 页面。</li>
<li><code>在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数</code>。</li>
<li>myFunction() 和 window.myFunction() 是一样的：</li>
</ul>
<h4 id="全局对象-是浏览器窗口（window对象）全局对象-浏览器窗口（window对象）"><a href="#全局对象-是浏览器窗口（window对象）全局对象-浏览器窗口（window对象）" class="headerlink" title="全局对象 是浏览器窗口（window对象）全局对象 == 浏览器窗口（window对象）"></a>全局对象 <code>是浏览器窗口（window对象）全局对象 == 浏览器窗口（window对象）</code></h4><p>==当函数没有被自身的对象调用时this的值就会变成全局对象==</p>
<p>在web浏览器中全局对象是浏览器窗口（window对象）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myFunction</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	retrun <span class="keyword">this</span>;</span><br><span class="line">&#125;</span><br><span class="line">myFunction(); <span class="comment">//返回window对象</span></span><br></pre></td></tr></table></figure>

<p>函数作为全局对象调用，会使this的值成为全局对象。</p>
<p>使用window对象作为一个变量容易造成程序崩溃</p>
<h4 id="二、函数作为方法调用-函数可以写在对象内，this指定此对象"><a href="#二、函数作为方法调用-函数可以写在对象内，this指定此对象" class="headerlink" title="二、函数作为方法调用 函数可以写在对象内，this指定此对象"></a><code>二、函数作为方法</code>调用 <code>函数可以写在对象内，this指定此对象</code></h4><p><code>函数作为对象调用，会使得this的值成为对象本身。</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> myObject = &#123;</span><br><span class="line">    firstName:<span class="string">"John"</span>,</span><br><span class="line">    lastName: <span class="string">"Doe"</span>,</span><br><span class="line">    fullName: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.firstName + <span class="string">" "</span> + <span class="keyword">this</span>.lastName; <span class="comment">//this 指定myObject</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">myObject.fullName();         <span class="comment">// 返回 "John Doe"</span></span><br><span class="line"><span class="keyword">var</span> myObject = &#123;</span><br><span class="line">    firstName:<span class="string">"John"</span>,</span><br><span class="line">    lastName: <span class="string">"Doe"</span>,</span><br><span class="line">    fullName: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>;<span class="comment">//this 指定myObject</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">myObject.fullName();          <span class="comment">// 返回 [object Object] (所有者对象)</span></span><br></pre></td></tr></table></figure>



<h4 id="三、使用构造函数调用函数"><a href="#三、使用构造函数调用函数" class="headerlink" title="三、使用构造函数调用函数"></a>三、使用<code>构造函数</code>调用函数</h4><p>如果函数调用前使用了 <strong>new</strong> 关键字, 则是调用了构造函数。</p>
<p>这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">function myFunction(arg1,arg2)&#123;</span><br><span class="line">	this.firstName &#x3D; arg1;</span><br><span class="line">	this.lastName &#x3D; arg2;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var x &#x3D; new myFunction(&quot;John&quot;,&quot;Doe&quot;);</span><br><span class="line">x.firstName;</span><br></pre></td></tr></table></figure>



<h4 id="四、作为函数方法-call-apply-调用函数"><a href="#四、作为函数方法-call-apply-调用函数" class="headerlink" title="四、作为函数方法 call() apply()调用函数"></a>四、作为<code>函数方法 call() apply()</code>调用函数</h4><p>在 JavaScript 中, 函数是对象。函数有它的属性和方法。</p>
<p><code>call() 和 apply()是预定义的函数方法。</code> 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myFunction</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a * b;</span><br><span class="line">&#125;</span><br><span class="line">myObject = myFunction.call(myObject, <span class="number">10</span>, <span class="number">2</span>);     <span class="comment">// 返回 20</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">myFunction</span>(<span class="params">a, b</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a * b;</span><br><span class="line">&#125;</span><br><span class="line">myObject = myFunction.call(myObject, <span class="number">10</span>, <span class="number">2</span>);     <span class="comment">// 返回 20</span></span><br></pre></td></tr></table></figure>

<p>两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。</p>
<p>在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 <strong>this</strong> 的值， 即使该参数不是一个对象。</p>
<p>在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。</p>
<p>通过 call() 或 apply() 方法你可以设置 <strong>this</strong> 的值, 且作为已存在对象的新方法调用。</p>
<h3 id="闭包-私有变量可以用到闭包-使得函数拥有私有变量变成可能"><a href="#闭包-私有变量可以用到闭包-使得函数拥有私有变量变成可能" class="headerlink" title="闭包 私有变量可以用到闭包\使得函数拥有私有变量变成可能"></a>闭包 <code>私有变量可以用到闭包\使得函数拥有私有变量变成可能</code></h3><p>==闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。==</p>
<p>==直观的说就是形成一个不销毁的栈环境==</p>
<p>JavaScript变量可以是局部变量或全局变量</p>
<p>私有变量可以用到闭包</p>
<h3 id="全局变量与局部变量-私有变量"><a href="#全局变量与局部变量-私有变量" class="headerlink" title="全局变量与局部变量 || 私有变量"></a>全局变量与局部变量 || 私有变量</h3><p>全局变量属于window对象、</p>
<p>全局变量可应用于页面上的所用脚本(就是不同的js文件加载到html后可以相互访问)</p>
<p>局部变量只能用于定义它函数内部。对于其他的函数或脚本代码是不可用的。</p>
<p>全局和局部变量即便名称相同，它们也是两个不同的变量。修改其中一个，不会影响另一个的值。</p>
<p>==不使用var关键字，那么它是一个全局属性，即便它在函数内定义，函数外也能访问==</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">c &#x3D; 1000;</span><br><span class="line">var b &#x3D; 10;  &#x2F;&#x2F;全局变量</span><br><span class="line">function myFunction()&#123;</span><br><span class="line">	var a &#x3D; 100; &#x2F;&#x2F; 局部变量</span><br><span class="line">	console.log(a);</span><br><span class="line">	console.log(b);</span><br><span class="line">	&#x2F;&#x2F;函数可以访问函数内部定义的变量也可以访问外部定义的变量</span><br><span class="line">&#125;</span><br><span class="line">console.log(a)&#x2F;&#x2F;报错，函数外没有办法访问函数内的变量</span><br></pre></td></tr></table></figure>



<h3 id="变量的生命周期"><a href="#变量的生命周期" class="headerlink" title="变量的生命周期"></a>变量的生命周期</h3><p>全局变量的作用域是全局性的，即在整个JavaScript程序中，全局变量处处都在。</p>
<p>而在函数内部声明的变量，只在函数内部起作用。这些变量是局部变量，作用域是局部性的；函数的参数也是局部性的，只在函数内部起作用。</p>
<h3 id="计时器困境-gt-内嵌函数-gt-闭包"><a href="#计时器困境-gt-内嵌函数-gt-闭包" class="headerlink" title="计时器困境=&gt;内嵌函数=&gt;闭包"></a><code>计时器困境=&gt;内嵌函数=&gt;闭包</code></h3><h3 id="计时器困境"><a href="#计时器困境" class="headerlink" title="计时器困境"></a>计时器困境</h3><p>问题：计时器进行设置初始值时如果设置为</p>
<p>全局变量=&gt;任何的js文件都能修改初始值的大小，而不用通过函数</p>
<p>局部变量=&gt;没有办法更改初始值的大小</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var count &#x3D; 0; &#x2F;&#x2F;页面上的任何脚本都能改变计数器，即便没有调用 add() 函数。</span><br><span class="line">function add()&#123;</span><br><span class="line">	var count &#x3D; 0;&#x2F;&#x2F;如果我在函数内声明计数器，如果没有调用函数将无法修改计数器的值：</span><br><span class="line">	return counter +&#x3D; 1;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="内嵌函数解决计时器困境"><a href="#内嵌函数解决计时器困境" class="headerlink" title="内嵌函数解决计时器困境"></a>内嵌函数解决计时器困境</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">function add()&#123;</span><br><span class="line">	var counter &#x3D; 0;</span><br><span class="line">	function plus()&#123;</span><br><span class="line">		couter +&#x3D; 1</span><br><span class="line">	&#125;</span><br><span class="line">	plus();</span><br><span class="line">	return counter;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h3 id="闭包是使用自调用函数解决问题"><a href="#闭包是使用自调用函数解决问题" class="headerlink" title="闭包是使用自调用函数解决问题"></a>闭包<code>是使用自调用函数解决问题</code></h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">var add &#x3D; (function()&#123;</span><br><span class="line">	var count &#x3D; 0;</span><br><span class="line">	return 	function()&#123;</span><br><span class="line">		count + &#x3D; 1;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)();</span><br><span class="line">function addNum()&#123;</span><br><span class="line">	console.log(add());</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>这个叫作 JavaScript <strong>闭包。</strong>它使得函数拥有私有变量变成可能。</p>
<p>变量 <strong>add</strong> 指定了函数自我调用的返回字值。</p>
<p>==自我调用函数只执行一次==。设置计数器为 0。并返回函数表达式。</p>
<p>add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。</p>
<p>这个叫作 JavaScript <strong>闭包。</strong>它使得函数拥有私有变量变成可能。</p>
<p>计数器受匿名函数的作用域保护，只能通过 add 方法修改。</p>
<blockquote>
<p>闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。</p>
<p>直观的说就是形成一个不销毁的栈环境。</p>
</blockquote>
<h2 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h2><p>######</p>
<table>
<thead>
<tr>
<th align="left"></th>
<th align="left"></th>
</tr>
</thead>
<tbody><tr>
<td align="left"></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"></td>
<td align="left"></td>
</tr>
<tr>
<td align="left"></td>
<td align="left"></td>
</tr>
</tbody></table>
<h2 id="表单"><a href="#表单" class="headerlink" title="表单"></a>表单</h2><h3 id="JavaScript-表单验证"><a href="#JavaScript-表单验证" class="headerlink" title="JavaScript 表单验证"></a>JavaScript 表单验证</h3><p>HTML 表单验证可以通过 JavaScript 来完成。</p>
<p>以下实例代码用于判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交：</p>
<p>function validateForm() {    var x = document.forms[“myForm”][“fname”].value;    if (x == null || x == “”) {        alert(“需要输入名字。”);        return false;    } }</p>
<p>以上 JavaScript 代码可以通过 HTML 代码来调用：</p>
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form>

<hr>
<h3 id="JavaScript-验证输入的数字"><a href="#JavaScript-验证输入的数字" class="headerlink" title="JavaScript 验证输入的数字"></a>JavaScript 验证输入的数字</h3><p>JavaScript 常用于对输入数字的验证：</p>
<p>请输入 1 到 10 之间的数字：</p>
<p> 提交</p>
<p><a href="https://www.runoob.com/try/try.php?filename=tryjs_validation_number" target="_blank" rel="noopener">»</a></p>
<hr>
<h3 id="HTML-表单自动验证"><a href="#HTML-表单自动验证" class="headerlink" title="HTML 表单自动验证"></a>HTML 表单自动验证</h3><p>HTML 表单验证也可以通过浏览器来自动完成。</p>
<p>如果表单字段 (fname) 的值为空, <strong>required</strong> 属性会阻止表单提交：</p>
<form action="demo_form.php" method="post">  <input type="text" name="fname" required="required">  <input type="submit" value="提交"> </form>


<p><a href="https://www.runoob.com/try/try.php?filename=tryjs_validation_html" target="_blank" rel="noopener">»</a></p>
<blockquote>
<p>Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。</p>
</blockquote>
<hr>
<h3 id="数据验证"><a href="#数据验证" class="headerlink" title="数据验证"></a>数据验证</h3><p>数据验证用于确保用户输入的数据是有效的。</p>
<p>典型的数据验证有：</p>
<ul>
<li>必需字段是否有输入?</li>
<li>用户是否输入了合法的数据?</li>
<li>在数字字段是否输入了文本?</li>
</ul>
<p>大多数情况下，数据验证用于确保用户正确输入数据。</p>
<p>数据验证可以使用不同方法来定义，并通过多种方式来调用。</p>
<p><strong>服务端数据验证</strong>是在数据提交到服务器上后再验证。</p>
<p><strong>客户端数据验证</strong>是在数据发送到服务器前，在浏览器上完成验证。</p>
<hr>
<h3 id="HTML-约束验证"><a href="#HTML-约束验证" class="headerlink" title="HTML 约束验证"></a>HTML 约束验证</h3><p>HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。</p>
<p>约束验证是表单被提交时浏览器用来实现验证的一种算法。</p>
<p>HTML 约束验证基于：</p>
<ul>
<li><strong>HTML 输入属性</strong></li>
<li><strong>CSS 伪类选择器</strong></li>
<li><strong>DOM 属性和方法</strong></li>
</ul>
<h3 id="约束验证-HTML-输入属性"><a href="#约束验证-HTML-输入属性" class="headerlink" title="约束验证 HTML 输入属性"></a>约束验证 HTML 输入属性</h3><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">disabled</td>
<td align="left">规定输入的元素不可用</td>
</tr>
<tr>
<td align="left">max</td>
<td align="left">规定输入元素的最大值</td>
</tr>
<tr>
<td align="left">min</td>
<td align="left">规定输入元素的最小值</td>
</tr>
<tr>
<td align="left">pattern</td>
<td align="left">规定输入元素值的模式</td>
</tr>
<tr>
<td align="left">required</td>
<td align="left">规定输入元素字段是必需的</td>
</tr>
<tr>
<td align="left">type</td>
<td align="left">规定输入元素的类型</td>
</tr>
</tbody></table>
<p>完整列表，请查看 <a href="https://www.runoob.com/html/html5-form-attributes.html" target="_blank" rel="noopener">HTML 输入属性</a>。</p>
<h3 id="约束验证-CSS-伪类选择器"><a href="#约束验证-CSS-伪类选择器" class="headerlink" title="约束验证 CSS 伪类选择器"></a>约束验证 CSS 伪类选择器</h3><table>
<thead>
<tr>
<th align="left">选择器</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">:disabled</td>
<td align="left">选取属性为 “disabled” 属性的 input 元素</td>
</tr>
<tr>
<td align="left">:invalid</td>
<td align="left">选取无效的 input 元素</td>
</tr>
<tr>
<td align="left">:optional</td>
<td align="left">选择没有”required”属性的 input 元素</td>
</tr>
<tr>
<td align="left">:required</td>
<td align="left">选择有”required”属性的 input 元素</td>
</tr>
<tr>
<td align="left">:valid</td>
<td align="left">选取有效值的 input 元素</td>
</tr>
</tbody></table>
<h3 id="表单验证"><a href="#表单验证" class="headerlink" title="表单验证"></a>表单验证</h3><hr>
<h3 id="JavaScript-表单验证-1"><a href="#JavaScript-表单验证-1" class="headerlink" title="JavaScript 表单验证"></a>JavaScript 表单验证</h3><p>JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。</p>
<p>表单数据经常需要使用 JavaScript 来验证其正确性：</p>
<ul>
<li>验证表单数据是否为空？</li>
<li>验证输入是否是一个正确的email地址？</li>
<li>验证日期是否输入正确？</li>
<li>验证表单输入内容是否为数字型？</li>
</ul>
<hr>
<h3 id="必填（或必选）项目"><a href="#必填（或必选）项目" class="headerlink" title="必填（或必选）项目"></a>必填（或必选）项目</h3><p>下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：</p>
<p>function validateForm() {  var x=document.forms[“myForm”][“fname”].value;  if (x==null || x==””)  {    alert(“姓必须填写”);    return false;  } }</p>
<p>以上函数在 form 表单提交时被调用:</p>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post"> 姓: <input type="text" name="fname"> <input type="submit" value="提交"> </form>

<p><a href="https://www.runoob.com/try/try.php?filename=tryjs_form_validation" target="_blank" rel="noopener"></a></p>
<hr>
<h3 id="E-mail-验证"><a href="#E-mail-验证" class="headerlink" title="E-mail 验证"></a>E-mail 验证</h3><p>下面的函数检查输入的数据是否符合电子邮件地址的基本语法。</p>
<p>意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：</p>
<p>function validateForm(){  var x=document.forms[“myForm”][“email”].value;  var atpos=x.indexOf(“@”);  var dotpos=x.lastIndexOf(“.”);  if (atpos&lt;1 || dotpos&lt;atpos+2 || dotpos+2&gt;=x.length){    alert(“不是一个有效的 e-mail 地址”);    return false;  } }</p>
<p>下面是连同 HTML 表单的完整代码：</p>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">    Email: <input type="text" name="email">    <input type="submit" value="提交"> </form>


<p><a href="https://www.runoob.com/try/try.php?filename=tryjs_form_validate_email" target="_blank" rel="noopener">»</a></p>
<p>验证API</p>
<h3 id="JavaScript-验证-API"><a href="#JavaScript-验证-API" class="headerlink" title="JavaScript 验证 API"></a>JavaScript 验证 API</h3><hr>
<h3 id="约束验证-DOM-方法"><a href="#约束验证-DOM-方法" class="headerlink" title="约束验证 DOM 方法"></a>约束验证 DOM 方法</h3><table>
<thead>
<tr>
<th align="left">Property</th>
<th align="left">Description</th>
</tr>
</thead>
<tbody><tr>
<td align="left">checkValidity()</td>
<td align="left">如果 input 元素中的数据是合法的返回 true，否则返回 false。</td>
</tr>
<tr>
<td align="left">setCustomValidity()</td>
<td align="left">设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示，方式如下：<code>setCustomValidity(&#39;&#39;)  setCustomValidity(null)  setCustomValidity(undefined)</code></td>
</tr>
</tbody></table>
<p>以下实例如果输入信息不合法，则返回错误信息：</p>
<h3 id="checkValidity-方法"><a href="#checkValidity-方法" class="headerlink" title="checkValidity() 方法"></a>checkValidity() 方法</h3><p><input id="id1" type="number" min="100" max="300" required> <button onclick="myFunction()">验证</button>  <p id="demo"></p>  <script></p>
<p>function myFunction() {    var inpObj = document.getElementById("id1");    if (inpObj.checkValidity() == false) {        document.getElementById("demo").innerHTML = inpObj.validationMessage;    } }</p>
<p></script></p>
<p><a href="https://www.runoob.com/try/try.php?filename=tryjs_validation_check" target="_blank" rel="noopener">»</a></p>
<hr>
<h3 id="约束验证-DOM-属性"><a href="#约束验证-DOM-属性" class="headerlink" title="约束验证 DOM 属性"></a>约束验证 DOM 属性</h3><table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">validity</td>
<td align="left">布尔属性值，返回 input 输入值是否合法</td>
</tr>
<tr>
<td align="left">validationMessage</td>
<td align="left">浏览器错误提示信息</td>
</tr>
<tr>
<td align="left">willValidate</td>
<td align="left">指定 input 是否需要验证</td>
</tr>
</tbody></table>
<hr>
<h3 id="Validity-属性"><a href="#Validity-属性" class="headerlink" title="Validity 属性"></a>Validity 属性</h3><p>input 元素的 <strong>validity 属性</strong>包含一系列关于 validity 数据属性:</p>
<table>
<thead>
<tr>
<th align="left">属性</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">customError</td>
<td align="left">设置为 true, 如果设置了自定义的 validity 信息。</td>
</tr>
<tr>
<td align="left">patternMismatch</td>
<td align="left">设置为 true, 如果元素的值不匹配它的模式属性。</td>
</tr>
<tr>
<td align="left">rangeOverflow</td>
<td align="left">设置为 true, 如果元素的值大于设置的最大值。</td>
</tr>
<tr>
<td align="left">rangeUnderflow</td>
<td align="left">设置为 true, 如果元素的值小于它的最小值。</td>
</tr>
<tr>
<td align="left">stepMismatch</td>
<td align="left">设置为 true, 如果元素的值不是按照规定的 step 属性设置。</td>
</tr>
<tr>
<td align="left">tooLong</td>
<td align="left">设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。</td>
</tr>
<tr>
<td align="left">typeMismatch</td>
<td align="left">设置为 true, 如果元素的值不是预期相匹配的类型。</td>
</tr>
<tr>
<td align="left">valueMissing</td>
<td align="left">设置为 true，如果元素 (required 属性) 没有值。</td>
</tr>
<tr>
<td align="left">valid</td>
<td align="left">设置为 true，如果元素的值是合法的。</td>
</tr>
</tbody></table>
<p>##</p>
<p>如果输入的值大于 100，显示一个信息：</p>
<h3 id="rangeOverflow-属性"><a href="#rangeOverflow-属性" class="headerlink" title="rangeOverflow 属性"></a>rangeOverflow 属性</h3><p><input id="id1" type="number" max="100"> <button onclick="myFunction()">验证</button>  <p id="demo"></p>  <script></p>
<p>function myFunction() {    var txt = "";    if (document.getElementById("id1").validity.rangeOverflow) {       txt = "输入的值太大了";    }    document.getElementById("demo").innerHTML = txt; }</p>
<p></script></p>
<p><a href="https://www.runoob.com/try/try.php?filename=tryjs_validation_rangeOverflow" target="_blank" rel="noopener">»</a></p>
<p>如果输入的值小于 100，显示一个信息：</p>
<h3 id="rangeUnderflow-属性"><a href="#rangeUnderflow-属性" class="headerlink" title="rangeUnderflow 属性"></a>rangeUnderflow 属性</h3><p><input id="id1" type="number" min="100" required> <button onclick="myFunction()">OK</button>  <p id="demo"></p>  <script></p>
<p>function myFunction() {    var txt = "";    var inpObj = document.getElementById("id1");    if(!isNumeric(inpObj.value)) {        txt = "你输入的不是数字";    } else if (inpObj.validity.rangeUnderflow) {        txt = "输入的值太小了";    } else {        txt = "输入正确";    }    document.getElementById("demo").innerHTML = txt; }  // 判断输入是否为数字 function isNumeric(n) {    return !isNaN(parseFloat(n)) && isFinite(n); }</p>
<p></script></p>
<p>保留关键字</p>
<p>在 JavaScript 中，一些标识符是保留关键字，不能用作变量名或函数名。</p>
<hr>
<h5 id="JavaScript-JSON-JavaScript-Object-Notation-存储和传输的格式、用于服务端向网页传送数据"><a href="#JavaScript-JSON-JavaScript-Object-Notation-存储和传输的格式、用于服务端向网页传送数据" class="headerlink" title="JavaScript JSON(JavaScript Object Notation)存储和传输的格式、用于服务端向网页传送数据"></a>JavaScript JSON(JavaScript Object Notation)<code>存储和传输的格式、用于服务端向网页传送数据</code></h5><h5 id="JSON数据（键值对-lt-、JSON对象-lt-、JSON数组"><a href="#JSON数据（键值对-lt-、JSON对象-lt-、JSON数组" class="headerlink" title="JSON数据（键值对&lt;、JSON对象{}&lt;、JSON数组[]"></a><code>JSON数据（键值对&lt;、JSON对象{}&lt;、JSON数组[]</code></h5><ul>
<li>JSON是用于存储和传输的格式</li>
<li>JSON通常用于服务端向网页传送数据</li>
<li>JSON是一种轻量级的数据交换格式</li>
<li>JSON是独立的语言</li>
<li>JSON易于理解</li>
<li>JSON 使用JavaScript语法，但是JSON格式仅仅是一个文本</li>
<li>文本可以被任何编程语言读取及作为数据格式传递</li>
</ul>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line"><span class="attr">"sites"</span>:[</span><br><span class="line">	&#123;<span class="attr">"name"</span>:<span class="string">"你的名字"</span>,<span class="attr">"url"</span>:<span class="string">"www.name.com"</span>&#125;,</span><br><span class="line">	&#123;<span class="attr">"name"</span>:<span class="string">"天气之子"</span>,<span class="attr">"url"</span>:<span class="string">"www.weather.com"</span>&#125;,</span><br><span class="line">	&#123;<span class="attr">"name"</span>:<span class="string">"言叶之庭"</span>,<span class="attr">"url"</span>:<span class="string">"www.leaf.com"</span>&#125;</span><br><span class="line">]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p>JSON语法规则</p>
<ul>
<li>数据为键/值对</li>
<li>数据由逗号分隔</li>
<li><code>大括号保持对象</code></li>
<li><code>方括号保存数组</code></li>
</ul>
<p>JSON数据 <code>键值对</code></p>
<p>JSON 数据格式为键值对，就像JavaScript对象属性。</p>
<p>键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">”name“:"你的名字"</span><br></pre></td></tr></table></figure>

<p>JSON对象</p>
<p>JSON 对象保存在大括号内。</p>
<p>就像在 JavaScript 中, 对象可以保存多个 键/值 对：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="attr">"name"</span>:<span class="string">"你的名字"</span>, <span class="attr">"url"</span>:<span class="string">"www.name.com"</span>&#125;</span><br></pre></td></tr></table></figure>

<p>JSON数组</p>
<p>JSON 数组保存在中括号内。</p>
<p>就像在 JavaScript 中, 数组可以包含对象：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">&quot;sites&quot;:[</span><br><span class="line">	&#123;&quot;name&quot;:&quot;你的名字&quot;,&quot;url&quot;:&quot;www.name.com&quot;&#125;,</span><br><span class="line">	&#123;&quot;name&quot;:&quot;天气之子&quot;,&quot;url&quot;:&quot;www.weather.com&quot;&#125;,</span><br><span class="line">	&#123;&quot;name&quot;:&quot;言叶之庭&quot;,&quot;url&quot;:&quot;www.leaf.com&quot;&#125;</span><br><span class="line">]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>对象 “sites” 是一个数组，包含了三个对象。</p>
<p>每个对象为站点的信息（网站名和网站地址）。</p>
<p>JSON格式化后为JavaScript对象    </p>
<p>JSON 格式在语法上与创建 JavaScript 对象代码是相同的。</p>
<p>由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。</p>
<p> JavaScript JSON.stringify()</p>
<p>JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">JSON.stringify(value[, replacer[, space]])</span><br><span class="line"></span><br><span class="line">value:</span><br><span class="line">必需， 要转换的 JavaScript 值（通常为对象或数组）。</span><br><span class="line"></span><br><span class="line">replacer:</span><br><span class="line">可选。用于转换结果的函数或数组。</span><br><span class="line"></span><br><span class="line">如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：&quot;&quot;。</span><br><span class="line"></span><br><span class="line">如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。</span><br><span class="line"></span><br><span class="line">space:</span><br><span class="line">可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。</span><br><span class="line"></span><br><span class="line">返回值：</span><br><span class="line">返回包含 JSON 文本的字符串。</span><br></pre></td></tr></table></figure>



<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">var str &#x3D; &#123;&quot;name&quot;:&quot;菜鸟教程&quot;, &quot;site&quot;:&quot;http:&#x2F;&#x2F;www.runoob.com&quot;&#125;</span><br><span class="line">str_pretty1 &#x3D; JSON.stringify(str)</span><br><span class="line">document.write( &quot;只有一个参数情况：&quot; );</span><br><span class="line">document.write( &quot;&lt;br&gt;&quot; );</span><br><span class="line">document.write(&quot;&lt;pre&gt;&quot; + str_pretty1 + &quot;&lt;&#x2F;pre&gt;&quot; );</span><br><span class="line"> </span><br><span class="line">document.write( &quot;&lt;br&gt;&quot; );</span><br><span class="line">str_pretty2 &#x3D; JSON.stringify(str, null, 4) &#x2F;&#x2F;使用四个空格缩进</span><br><span class="line">document.write( &quot;使用参数情况：&quot; );</span><br><span class="line">document.write( &quot;&lt;br&gt;&quot; );</span><br><span class="line">document.write(&quot;&lt;pre&gt;&quot; + str_pretty2 + &quot;&lt;&#x2F;pre&gt;&quot; ); &#x2F;&#x2F; pre 用于格式化输出</span><br></pre></td></tr></table></figure>



<p>JSON字符串转换为JavaScript对象  <code>JSON parse()</code></p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">JSON.parse(text[, reviver])</span><br><span class="line">text:必需， 一个有效的 JSON 字符串。</span><br><span class="line">reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。</span><br></pre></td></tr></table></figure>

<p>通常我们从服务器中读取 JSON 数据，并在网页中显示数据。</p>
<p>简单起见，我们网页中直接设置 JSON 字符串 (你还可以阅读我们的 <a href="https://www.runoob.com/json/json-tutorial.html" target="_blank" rel="noopener">JSON 教程</a>):</p>
<p>首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">var text = '&#123; "sites" : [' +</span><br><span class="line">'&#123; "name":"Runoob" , "url":"www.runoob.com" &#125;,' +</span><br><span class="line">'&#123; "name":"Google" , "url":"www.google.com" &#125;,' +</span><br><span class="line">'&#123; "name":"Taobao" , "url":"www.taobao.com" &#125; ]&#125;';</span><br><span class="line"></span><br><span class="line">var text = '&#123; "sites" : [' +</span><br><span class="line">    '&#123; "name":"Runoob" , "url":"www.runoob.com" &#125;,' +</span><br><span class="line">    '&#123; "name":"Google" , "url":"www.google.com" &#125;,' +</span><br><span class="line">    '&#123; "name":"Taobao" , "url":"www.taobao.com" &#125; ]&#125;';</span><br><span class="line">    </span><br><span class="line">obj = JSON.parse(text);</span><br><span class="line">document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;</span><br><span class="line"></span><br><span class="line"><span class="comment">// [1]的值为sites数组的下标值</span></span><br></pre></td></tr></table></figure>

<p>然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var obj &#x3D; JSON.parse(text);</span><br></pre></td></tr></table></figure>



<p>相关函数</p>
<table>
<thead>
<tr>
<th>函数</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>JSON parse()</td>
<td>用于将一个JSON字符串转换为JavaScript对象<code>JSON字符串 =&gt; Javascript对象</code></td>
</tr>
<tr>
<td>JSON stringify()</td>
<td>用于将一个JavaSript值装换为JSON字符串 <code>JavaScript值=&gt;JSON字符串</code></td>
</tr>
</tbody></table>
<h5 id="JavaScript-void-javascript-void-0-死链接-void该操作符指定要计算一个表达式但是不返回值"><a href="#JavaScript-void-javascript-void-0-死链接-void该操作符指定要计算一个表达式但是不返回值" class="headerlink" title="JavaScript void ``javascript:void(0)死链接 void该操作符指定要计算一个表达式但是不返回值`"></a>JavaScript void ``javascript:void(0)死链接 void该操作符指定要计算一个表达式但是不返回值`</h5><p><code>javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;a href&#x3D;&quot;javascript:void(0)&quot;&gt;单击此处什么也不会发生&lt;&#x2F;a&gt;</span><br><span class="line">&#x2F;&#x2F;创建了一个超级链接，当用户点击以后不会发生任何事。</span><br><span class="line">&lt;a href&#x3D;&quot;javascript:void(alert(&#39;Warning!!!&#39;))&quot;&gt;点我!&lt;&#x2F;a&gt;</span><br><span class="line">&#x2F;&#x2F;在用户点击链接后显示警告信息：</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">a &#x3D; void ( b &#x3D; 5, c &#x3D; 7 ); &#x2F;&#x2F; a undefined</span><br><span class="line"></span><br><span class="line">void func()</span><br><span class="line">javascript:void func()</span><br><span class="line"></span><br><span class="line">或者</span><br><span class="line"></span><br><span class="line">void(func())</span><br><span class="line">javascript:void(func())</span><br></pre></td></tr></table></figure>



<h5 id="href-”-”与href-”javascript-void-0-”的区别"><a href="#href-”-”与href-”javascript-void-0-”的区别" class="headerlink" title="href=”#”与href=”javascript:void(0)”的区别"></a>href=”#”与href=”javascript:void(0)”的区别</h5><p><strong>#</strong> 包含了一个位置信息，默认的锚是<strong>#top</strong> 也就是网页的上端。</p>
<p>而javascript:void(0), 仅仅表示一个死链接。</p>
<p>在页面很长的时候会使用 <strong>#</strong> 来定位页面的具体位置，格式为：<strong># + id</strong>。</p>
<p>如果你要定义一个死链接请使用 javascript:void(0) 。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;a href=<span class="string">"javascript:void(0);"</span>&gt;点我没有反应的!&lt;<span class="regexp">/a&gt;</span></span><br><span class="line"><span class="regexp">&lt;a href="#pos"&gt;点我定位到指定位置!&lt;/</span>a&gt;</span><br><span class="line">&lt;br&gt;</span><br><span class="line">...</span><br><span class="line">&lt;br&gt;</span><br><span class="line">&lt;p id=<span class="string">"pos"</span>&gt;尾部定位点&lt;<span class="regexp">/p&gt;</span></span><br></pre></td></tr></table></figure>



<h3 id="代码规范"><a href="#代码规范" class="headerlink" title="代码规范"></a>代码规范</h3><ol>
<li>变量名驼峰法，除第一个单词之外，其他单词首字母大写（ <strong>lowerCamelCase</strong>）</li>
<li>全局变量为大写 (<strong>UPPERCASE</strong> )</li>
<li>常量 (如 PI) 为大写 (<strong>UPPERCASE</strong> ) <code>const 定义</code></li>
<li>变量名不要以 $ 作为开始标记，会与很多 JavaScript 库冲突。</li>
<li>空格、代码缩进</li>
<li>分号结尾</li>
<li>为了便于阅读每行字符建议小于数 80 个。</li>
<li>使用小写文件名</li>
<li>data-  横杠(-)字符通常在 JavaScript 中被认为是减法，所以不允许使用。</li>
<li>js 可以使用下划线使用下划线</li>
</ol>
<h3 id="作用域-1"><a href="#作用域-1" class="headerlink" title="作用域"></a>作用域</h3><ul>
<li>作用域是可访问变量的集合。</li>
<li>在 JavaScript 中, 对象和函数同样也是变量。</li>
<li><strong>在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。</strong></li>
<li>JavaScript 函数作用域: 作用域在函数内修改。</li>
</ul>
<h4 id="全局作用域-1"><a href="#全局作用域-1" class="headerlink" title="全局作用域"></a>全局作用域</h4><h4 id="函数作用域-1"><a href="#函数作用域-1" class="headerlink" title="函数作用域"></a>函数作用域</h4><p>变量在函数内声明，变量为函数作用域</p>
<p>局部变量：只能在函数内部访问</p>
<h4 id="块级作用域"><a href="#块级作用域" class="headerlink" title="块级作用域"></a>块级作用域</h4><h1 id="JavaScript进阶语法"><a href="#JavaScript进阶语法" class="headerlink" title="JavaScript进阶语法"></a>JavaScript进阶语法</h1><h2 id="内置对象"><a href="#内置对象" class="headerlink" title="内置对象"></a>内置对象</h2><h2 id="DOM"><a href="#DOM" class="headerlink" title="DOM"></a>DOM</h2><h2 id="BOM"><a href="#BOM" class="headerlink" title="BOM"></a>BOM</h2><h2 id="正则"><a href="#正则" class="headerlink" title="正则"></a>正则</h2><p> <a href="C:\Users\Administrator\Desktop\StudyNote\Web\JS\JavaScript\正则表达式.md">正则表达式</a></p>
<h2 id="AJAX"><a href="#AJAX" class="headerlink" title="AJAX"></a>AJAX</h2><p> <a href="C:\Users\Administrator\Desktop\StudyNote\Web\JS\JavaScript\AJAX.md">AJAX</a></p>
<h2 id="JSON"><a href="#JSON" class="headerlink" title="JSON"></a>JSON</h2><p> <a href="C:\Users\Administrator\Desktop\StudyNote\Web\JS\JavaScript\JSON.md">JSON</a></p>

    </div>

    
    
    
        <div class="reward-container">
  <div></div>
  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
    打赏
  </button>
  <div id="qr" style="display: none;">
      
      <div style="display: inline-block;">
        <img src="/images/wechatpay.jpg" alt="heweiliang 微信支付">
        <p>微信支付</p>
      </div>
      
      <div style="display: inline-block;">
        <img src="/images/alipay.jpg" alt="heweiliang 支付宝">
        <p>支付宝</p>
      </div>

  </div>
</div>

        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/atom.xml">
            <span class="icon">
              <i class="fa fa-rss"></i>
            </span>

            <span class="label">RSS</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E5%89%8D%E7%AB%AF/" rel="tag"># 前端</a>
              <a href="/tags/JavaScript/" rel="tag"># JavaScript</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/04/04/%E9%9D%A2%E8%AF%95/%E9%9D%A2%E8%AF%95%E9%A2%98/" rel="prev" title="面试/面试题">
      <i class="fa fa-chevron-left"></i> 面试/面试题
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/04/06/%E6%97%A5%E5%B8%B8%E7%94%9F%E6%B4%BB/%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95/%E9%81%93%E7%90%86/" rel="next" title="日常生活/学习方法/道理">
      日常生活/学习方法/道理 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    
  <div class="comments">
    <div id="lv-container" data-id="city" data-uid="MTAyMC81MDY1MC8yNzEzMw=="></div>
  </div>
  

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Javscript基础语法"><span class="nav-number">1.</span> <span class="nav-text">Javscript基础语法</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#概念"><span class="nav-number">1.1.</span> <span class="nav-text">概念</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#历史"><span class="nav-number">1.1.1.</span> <span class="nav-text">历史</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#组成部分-ECMAScript-DOM-BOM"><span class="nav-number">1.1.2.</span> <span class="nav-text">组成部分 ECMAScript + DOM + BOM</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ECMScript-标准-（ES6-2015）-JavaScript（商标）"><span class="nav-number">1.1.3.</span> <span class="nav-text">ECMScript (标准)（ES6 2015）&#x3D;&#x3D; JavaScript（商标）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#版本（ES6-2015）"><span class="nav-number">1.1.4.</span> <span class="nav-text">版本（ES6 2015）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#语法"><span class="nav-number">1.2.</span> <span class="nav-text">语法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#语法规制"><span class="nav-number">1.2.1.</span> <span class="nav-text">语法规制</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#命名规则"><span class="nav-number">1.2.2.</span> <span class="nav-text">命名规则</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#script标签的位置与使用"><span class="nav-number">1.2.3.</span> <span class="nav-text">script标签的位置与使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#输入-提示框-输出"><span class="nav-number">1.2.4.</span> <span class="nav-text">输入(提示框)输出</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#输入-提示框"><span class="nav-number">1.2.4.1.</span> <span class="nav-text">输入: 提示框</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#输出：四种方法-document-write-console-log-alert-innerHTML-quot-quot"><span class="nav-number">1.2.4.2.</span> <span class="nav-text">输出：四种方法 document.write() console.log() alert() innerHTML &#x3D; &quot; &quot;</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#变量var-ES6变量-let-与常量-const"><span class="nav-number">1.2.5.</span> <span class="nav-text">变量var ES6变量(let)与常量(const)</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#var-amp-amp-let-amp-amp-const"><span class="nav-number">1.2.5.1.</span> <span class="nav-text">var &amp;&amp; let&amp;&amp; const</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#var"><span class="nav-number">1.2.5.1.1.</span> <span class="nav-text">var</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#let"><span class="nav-number">1.2.5.1.2.</span> <span class="nav-text">let</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#const并非真正的变量-数组或者对象的属性可以改变"><span class="nav-number">1.2.5.1.3.</span> <span class="nav-text">const并非真正的变量 数组或者对象的属性可以改变</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#全局变量和局部变量"><span class="nav-number">1.2.5.2.</span> <span class="nav-text">全局变量和局部变量</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#作用域"><span class="nav-number">1.2.5.3.</span> <span class="nav-text">作用域</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#全局作用域"><span class="nav-number">1.2.5.3.1.</span> <span class="nav-text">全局作用域</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#函数作用域"><span class="nav-number">1.2.5.3.2.</span> <span class="nav-text">函数作用域</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#块级作用域（Block-Scope）"><span class="nav-number">1.2.5.3.3.</span> <span class="nav-text">块级作用域（Block Scope）</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#循环作用域"><span class="nav-number">1.2.5.3.4.</span> <span class="nav-text">循环作用域</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#词义作用域"><span class="nav-number">1.2.5.3.5.</span> <span class="nav-text">词义作用域</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#HTML-代码中使用全局变量"><span class="nav-number">1.2.5.4.</span> <span class="nav-text">HTML 代码中使用全局变量</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#变量提升"><span class="nav-number">1.2.5.5.</span> <span class="nav-text">变量提升</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#语句标识符-关键字"><span class="nav-number">1.2.6.</span> <span class="nav-text">语句标识符)(关键字)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#注释"><span class="nav-number">1.2.7.</span> <span class="nav-text">注释</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#运算符"><span class="nav-number">1.2.8.</span> <span class="nav-text">运算符</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#语句-三种语句-顺序-条件-循环"><span class="nav-number">1.2.9.</span> <span class="nav-text">语句 三种语句 顺序&#x2F;条件&#x2F;循环</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#顺序语法"><span class="nav-number">1.2.9.1.</span> <span class="nav-text">顺序语法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#条件语句"><span class="nav-number">1.2.9.2.</span> <span class="nav-text">条件语句</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#循环语句"><span class="nav-number">1.2.9.3.</span> <span class="nav-text">循环语句</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#代码块"><span class="nav-number">1.2.9.4.</span> <span class="nav-text">代码块</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#三个关键字-break-continue-return"><span class="nav-number">1.2.9.5.</span> <span class="nav-text">三个关键字 break \ continue \ return</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#break"><span class="nav-number">1.2.9.5.1.</span> <span class="nav-text">break</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#continue"><span class="nav-number">1.2.9.5.2.</span> <span class="nav-text">continue</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#return"><span class="nav-number">1.2.9.5.3.</span> <span class="nav-text">return</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数据类型"><span class="nav-number">1.2.10.</span> <span class="nav-text">数据类型</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#基本数据类型-Number-Boolean-String-Null-Undefined-Symbool"><span class="nav-number">1.2.10.1.</span> <span class="nav-text">基本数据类型 Number + Boolean + String + Null + Undefined + Symbool</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#Number-数字"><span class="nav-number">1.2.10.1.1.</span> <span class="nav-text">Number 数字</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#String-字符串（类似数组）"><span class="nav-number">1.2.10.1.2.</span> <span class="nav-text">String 字符串（类似数组）</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#Boolean布尔值"><span class="nav-number">1.2.10.1.3.</span> <span class="nav-text">Boolean布尔值</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#null-空值-和undefined-未定义"><span class="nav-number">1.2.10.1.4.</span> <span class="nav-text">null 空值 和undefined 未定义</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#声明变量类型"><span class="nav-number">1.2.10.1.4.1.</span> <span class="nav-text">声明变量类型</span></a></li></ol></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#引用数据类型-对象、数字、函数"><span class="nav-number">1.2.10.2.</span> <span class="nav-text">引用数据类型 对象、数字、函数</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#数组"><span class="nav-number">1.2.10.2.1.</span> <span class="nav-text">数组 [ ]</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#对象-对象属性-和-对象方法"><span class="nav-number">1.2.10.2.2.</span> <span class="nav-text">对象 { } 对象属性 和 对象方法()</span></a><ol class="nav-child"><li class="nav-item nav-level-6"><a class="nav-link" href="#Javascript变量的生存期"><span class="nav-number">1.2.10.2.2.1.</span> <span class="nav-text">Javascript变量的生存期</span></a></li><li class="nav-item nav-level-6"><a class="nav-link" href="#向未声明的-JavaScript-变量分配值"><span class="nav-number">1.2.10.2.2.2.</span> <span class="nav-text">向未声明的 JavaScript 变量分配值</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#类型转换"><span class="nav-number">1.2.11.</span> <span class="nav-text">类型转换</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#数据类型-6-3"><span class="nav-number">1.2.11.1.</span> <span class="nav-text">数据类型 6+3</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#constructor属性"><span class="nav-number">1.2.11.2.</span> <span class="nav-text">constructor属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#JavaScript类型装换"><span class="nav-number">1.2.11.3.</span> <span class="nav-text">JavaScript类型装换</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#一元运算符"><span class="nav-number">1.2.11.4.</span> <span class="nav-text">一元运算符 +</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript-标准"><span class="nav-number">1.2.12.</span> <span class="nav-text">JavaScript 标准</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript-保留关键字"><span class="nav-number">1.2.13.</span> <span class="nav-text">JavaScript 保留关键字</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript-对象、属性和方法"><span class="nav-number">1.2.14.</span> <span class="nav-text">JavaScript 对象、属性和方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Java-保留关键字"><span class="nav-number">1.2.15.</span> <span class="nav-text">Java 保留关键字</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Windows-保留关键字"><span class="nav-number">1.2.16.</span> <span class="nav-text">Windows 保留关键字</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML-事件句柄"><span class="nav-number">1.2.17.</span> <span class="nav-text">HTML 事件句柄</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#非标准-JavaScript"><span class="nav-number">1.2.18.</span> <span class="nav-text">非标准 JavaScript</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#JavaScript-this-关键字"><span class="nav-number">1.2.18.1.</span> <span class="nav-text">JavaScript this 关键字</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#方法中的-this"><span class="nav-number">1.2.19.</span> <span class="nav-text">方法中的 this</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#单独使用-this"><span class="nav-number">1.2.20.</span> <span class="nav-text">单独使用 this</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#"><span class="nav-number">1.2.21.</span> <span class="nav-text"></span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#-1"><span class="nav-number">1.2.22.</span> <span class="nav-text"></span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#函数中使用-this（默认）"><span class="nav-number">1.2.23.</span> <span class="nav-text">函数中使用 this（默认）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#函数中使用-this（严格模式）"><span class="nav-number">1.2.24.</span> <span class="nav-text">函数中使用 this（严格模式）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#事件中的-this"><span class="nav-number">1.2.25.</span> <span class="nav-text">事件中的 this</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#对象方法中绑定"><span class="nav-number">1.2.26.</span> <span class="nav-text">对象方法中绑定</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#显式函数绑定"><span class="nav-number">1.2.27.</span> <span class="nav-text">显式函数绑定</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#错误-throw-try-catch"><span class="nav-number">1.2.28.</span> <span class="nav-text">错误 throw try catch</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#try语句测试代码块的错误。"><span class="nav-number">1.2.28.1.</span> <span class="nav-text">try语句测试代码块的错误。</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#JavaScript-try-和-catch"><span class="nav-number">1.2.28.2.</span> <span class="nav-text">JavaScript try 和 catch</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#finally-语句"><span class="nav-number">1.2.28.3.</span> <span class="nav-text">finally 语句</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Throw-语句"><span class="nav-number">1.2.28.4.</span> <span class="nav-text">Throw 语句</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#调试"><span class="nav-number">1.2.29.</span> <span class="nav-text">调试</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#严格模式"><span class="nav-number">1.2.30.</span> <span class="nav-text">严格模式</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#strict模式（严格模式）"><span class="nav-number">1.2.30.0.1.</span> <span class="nav-text">strict模式（严格模式）</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#使用误区"><span class="nav-number">1.2.31.</span> <span class="nav-text">使用误区</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#函数"><span class="nav-number">1.3.</span> <span class="nav-text">函数</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#函数-function"><span class="nav-number">1.3.1.</span> <span class="nav-text">函数 function</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#定义-构造函数、匿名函数、自调用函数、函数提升、ES6箭头函数"><span class="nav-number">1.3.2.</span> <span class="nav-text">定义 构造函数、匿名函数、自调用函数、函数提升、ES6箭头函数</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#函数可以为一个值使用"><span class="nav-number">1.3.2.1.</span> <span class="nav-text">函数可以为一个值使用</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#构造函数-不常使用构造函数，避免使用关键字new"><span class="nav-number">1.3.2.2.</span> <span class="nav-text">构造函数 不常使用构造函数，避免使用关键字new</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#匿名函数"><span class="nav-number">1.3.2.3.</span> <span class="nav-text">匿名函数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#函数提升-Hoisting-使用表达式定义函数时无法提升"><span class="nav-number">1.3.2.4.</span> <span class="nav-text">函数提升(Hoisting) 使用表达式定义函数时无法提升</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#函数是一个对象"><span class="nav-number">1.3.2.5.</span> <span class="nav-text">函数是一个对象</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#自调用函数"><span class="nav-number">1.3.2.6.</span> <span class="nav-text">自调用函数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ES6-箭头函数-解决的是匿名函数，没有函数名的"><span class="nav-number">1.3.2.7.</span> <span class="nav-text">ES6 箭头函数 解决的是匿名函数，没有函数名的</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#参数-显式参数与隐式参数-参数默认值-arguments-对象-通过值（对象）传递参数"><span class="nav-number">1.3.3.</span> <span class="nav-text">参数 显式参数与隐式参数 参数默认值 arguments 对象 通过值（对象）传递参数</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#函数显式参数-Parameters-与隐式参数-Arguments"><span class="nav-number">1.3.3.1.</span> <span class="nav-text">函数显式参数(Parameters)与隐式参数(Arguments)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#参数规则"><span class="nav-number">1.3.3.2.</span> <span class="nav-text">参数规则</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#默认参数"><span class="nav-number">1.3.3.3.</span> <span class="nav-text">默认参数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ES6-函数可以自带参数（默认值）"><span class="nav-number">1.3.3.4.</span> <span class="nav-text">ES6 函数可以自带参数（默认值）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#arguments-对象"><span class="nav-number">1.3.3.5.</span> <span class="nav-text">arguments 对象</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#通过值传递参数"><span class="nav-number">1.3.3.6.</span> <span class="nav-text">通过值传递参数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#通过对象传递参数"><span class="nav-number">1.3.3.7.</span> <span class="nav-text">通过对象传递参数</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#调用-调用-this的指代问题-JavaScript-函数有-4-种调用方式。"><span class="nav-number">1.3.4.</span> <span class="nav-text">调用    调用 || this的指代问题 JavaScript 函数有 4 种调用方式。</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#作为一个函数调用、函数作为方法调用（Object）、使用构造函数调用函数、作为函数方法调用函数"><span class="nav-number">1.3.5.</span> <span class="nav-text">&#x3D;&#x3D;作为一个函数调用、函数作为方法调用（Object）、使用构造函数调用函数、作为函数方法调用函数&#x3D;&#x3D;</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#this关键字"><span class="nav-number">1.3.5.1.</span> <span class="nav-text">this关键字</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#调用JavaScript函数"><span class="nav-number">1.3.5.2.</span> <span class="nav-text">调用JavaScript函数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#一、作为一个函数调用"><span class="nav-number">1.3.5.3.</span> <span class="nav-text">一、作为一个函数调用</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#全局对象-是浏览器窗口（window对象）全局对象-浏览器窗口（window对象）"><span class="nav-number">1.3.5.4.</span> <span class="nav-text">全局对象 是浏览器窗口（window对象）全局对象 &#x3D;&#x3D; 浏览器窗口（window对象）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#二、函数作为方法调用-函数可以写在对象内，this指定此对象"><span class="nav-number">1.3.5.5.</span> <span class="nav-text">二、函数作为方法调用 函数可以写在对象内，this指定此对象</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#三、使用构造函数调用函数"><span class="nav-number">1.3.5.6.</span> <span class="nav-text">三、使用构造函数调用函数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#四、作为函数方法-call-apply-调用函数"><span class="nav-number">1.3.5.7.</span> <span class="nav-text">四、作为函数方法 call() apply()调用函数</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#闭包-私有变量可以用到闭包-使得函数拥有私有变量变成可能"><span class="nav-number">1.3.6.</span> <span class="nav-text">闭包 私有变量可以用到闭包\使得函数拥有私有变量变成可能</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#全局变量与局部变量-私有变量"><span class="nav-number">1.3.7.</span> <span class="nav-text">全局变量与局部变量 || 私有变量</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#变量的生命周期"><span class="nav-number">1.3.8.</span> <span class="nav-text">变量的生命周期</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#计时器困境-gt-内嵌函数-gt-闭包"><span class="nav-number">1.3.9.</span> <span class="nav-text">计时器困境&#x3D;&gt;内嵌函数&#x3D;&gt;闭包</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#计时器困境"><span class="nav-number">1.3.10.</span> <span class="nav-text">计时器困境</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#内嵌函数解决计时器困境"><span class="nav-number">1.3.11.</span> <span class="nav-text">内嵌函数解决计时器困境</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#闭包是使用自调用函数解决问题"><span class="nav-number">1.3.12.</span> <span class="nav-text">闭包是使用自调用函数解决问题</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#事件"><span class="nav-number">1.4.</span> <span class="nav-text">事件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#表单"><span class="nav-number">1.5.</span> <span class="nav-text">表单</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript-表单验证"><span class="nav-number">1.5.1.</span> <span class="nav-text">JavaScript 表单验证</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript-验证输入的数字"><span class="nav-number">1.5.2.</span> <span class="nav-text">JavaScript 验证输入的数字</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML-表单自动验证"><span class="nav-number">1.5.3.</span> <span class="nav-text">HTML 表单自动验证</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数据验证"><span class="nav-number">1.5.4.</span> <span class="nav-text">数据验证</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML-约束验证"><span class="nav-number">1.5.5.</span> <span class="nav-text">HTML 约束验证</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#约束验证-HTML-输入属性"><span class="nav-number">1.5.6.</span> <span class="nav-text">约束验证 HTML 输入属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#约束验证-CSS-伪类选择器"><span class="nav-number">1.5.7.</span> <span class="nav-text">约束验证 CSS 伪类选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#表单验证"><span class="nav-number">1.5.8.</span> <span class="nav-text">表单验证</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript-表单验证-1"><span class="nav-number">1.5.9.</span> <span class="nav-text">JavaScript 表单验证</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#必填（或必选）项目"><span class="nav-number">1.5.10.</span> <span class="nav-text">必填（或必选）项目</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#E-mail-验证"><span class="nav-number">1.5.11.</span> <span class="nav-text">E-mail 验证</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript-验证-API"><span class="nav-number">1.5.12.</span> <span class="nav-text">JavaScript 验证 API</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#约束验证-DOM-方法"><span class="nav-number">1.5.13.</span> <span class="nav-text">约束验证 DOM 方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#checkValidity-方法"><span class="nav-number">1.5.14.</span> <span class="nav-text">checkValidity() 方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#约束验证-DOM-属性"><span class="nav-number">1.5.15.</span> <span class="nav-text">约束验证 DOM 属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Validity-属性"><span class="nav-number">1.5.16.</span> <span class="nav-text">Validity 属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#rangeOverflow-属性"><span class="nav-number">1.5.17.</span> <span class="nav-text">rangeOverflow 属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#rangeUnderflow-属性"><span class="nav-number">1.5.18.</span> <span class="nav-text">rangeUnderflow 属性</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#JavaScript-JSON-JavaScript-Object-Notation-存储和传输的格式、用于服务端向网页传送数据"><span class="nav-number">1.5.18.0.1.</span> <span class="nav-text">JavaScript JSON(JavaScript Object Notation)存储和传输的格式、用于服务端向网页传送数据</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#JSON数据（键值对-lt-、JSON对象-lt-、JSON数组"><span class="nav-number">1.5.18.0.2.</span> <span class="nav-text">JSON数据（键值对&lt;、JSON对象{}&lt;、JSON数组[]</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#JavaScript-void-javascript-void-0-死链接-void该操作符指定要计算一个表达式但是不返回值"><span class="nav-number">1.5.18.0.3.</span> <span class="nav-text">JavaScript void &#96;&#96;javascript:void(0)死链接 void该操作符指定要计算一个表达式但是不返回值&#96;</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#href-”-”与href-”javascript-void-0-”的区别"><span class="nav-number">1.5.18.0.4.</span> <span class="nav-text">href&#x3D;”#”与href&#x3D;”javascript:void(0)”的区别</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#代码规范"><span class="nav-number">1.5.19.</span> <span class="nav-text">代码规范</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#作用域-1"><span class="nav-number">1.5.20.</span> <span class="nav-text">作用域</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#全局作用域-1"><span class="nav-number">1.5.20.1.</span> <span class="nav-text">全局作用域</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#函数作用域-1"><span class="nav-number">1.5.20.2.</span> <span class="nav-text">函数作用域</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#块级作用域"><span class="nav-number">1.5.20.3.</span> <span class="nav-text">块级作用域</span></a></li></ol></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#JavaScript进阶语法"><span class="nav-number">2.</span> <span class="nav-text">JavaScript进阶语法</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#内置对象"><span class="nav-number">2.1.</span> <span class="nav-text">内置对象</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DOM"><span class="nav-number">2.2.</span> <span class="nav-text">DOM</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#BOM"><span class="nav-number">2.3.</span> <span class="nav-text">BOM</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#正则"><span class="nav-number">2.4.</span> <span class="nav-text">正则</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#AJAX"><span class="nav-number">2.5.</span> <span class="nav-text">AJAX</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JSON"><span class="nav-number">2.6.</span> <span class="nav-text">JSON</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="heweiliang"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">heweiliang</p>
  <div class="site-description" itemprop="description">heweiliang blog</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">96</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">18</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">24</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/yourname" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:yourname@gmail.com" title="E-Mail → mailto:yourname@gmail.com" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="https://plus.google.com/yourname" title="Google → https:&#x2F;&#x2F;plus.google.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-google"></i></a>
      </span>
      <span class="links-of-author-item">
        <a href="https://stackoverflow.com/yourname" title="StackOverflow → https:&#x2F;&#x2F;stackoverflow.com&#x2F;yourname" rel="noopener" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i></a>
      </span>
  </div>
  <div class="cc-license motion-element" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" rel="noopener" target="_blank"><img src="/images/cc-by-nc-sa.svg" alt="Creative Commons"></a>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title">
      <i class="fa fa-fw fa-link"></i>
      Links
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title2</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://yoursite.com/" title="http:&#x2F;&#x2F;yoursite.com">Title3</a>
        </li>
    </ul>
  </div>

      </div>
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">heweiliang</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    <span title="站点总字数">376k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">5:42</span>
</div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>


  <script defer src="/lib/three/three.min.js"></script>
    <script defer src="/lib/three/three-waves.min.js"></script>
    <script defer src="/lib/three/canvas_lines.min.js"></script>


  




  
<script src="/js/local-search.js"></script>













  

  

<script>
NexT.utils.loadComments(document.querySelector('#lv-container'), () => {
  window.livereOptions = {
    refer: location.pathname.replace(CONFIG.root, '').replace('index.html', '')
  };
  (function(d, s) {
    var j, e = d.getElementsByTagName(s)[0];
    if (typeof LivereTower === 'function') { return; }
    j = d.createElement(s);
    j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
    j.async = true;
    e.parentNode.insertBefore(j, e);
  })(document, 'script');
});
</script>

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/Epsilon2.1.model.json"},"display":{"position":"left","width":300,"height":600},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>
